• Angular4之常用指令


    Angular4指令

    NgIf

    <div *ngIf="false"></div> <!-- never displayed -->
    <div *ngIf="a > b"></div> <!-- displayed if a is more than b -->
    <div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" -->
    <div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->
    

    NgSwitch

    有时候需要根据不同的条件,渲染不同的元素,此时我们可以使用多个ngIf来实现。

    <div class="container">
        <div *ngIf="myVar == 'A'">Var is A</div>
        <div *ngIf="myVar == 'B'">Var is B</div>
        <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
    </div>    
    

    如果myVar的可选值多了一个'C',就得相应增加判断逻辑:

    <div class="container">
        <div *ngIf="myVar == 'A'">Var is A</div>
        <div *ngIf="myVar == 'B'">Var is B</div>
        <div *ngIf="myVar == 'C'">Var is C</div>
        <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">
          Var is something else
          </div>
    </div>
    

    可以发现 Var is something else 的判断逻辑,会随着 myVar 可选值的新增,变得越来越复杂。遇到这种情景,我们可以使用 ngSwitch 指令。

    <div class="container" [ngSwitch]="myVar">
        <div *ngSwitchCase="'A'">Var is A</div>
        <div *ngSwitchCase="'B'">Var is B</div>
        <div *ngSwitchCase="'C'">Var is C</div>
        <div *ngSwitchDefault>Var is something else</div>
    </div>
    

    NgStyle

    NgStyle让我们可以方便的通过Angular表达式,设置DOM元素的css属性。

    • 设置元素的背景颜色
    <div [style.background-color="'yellow'"]>
      Use fixed yellow background
    </div> 
    
    • 设置元素的字体大小
    <!-- 支持单位: px | em | %-->
    <div>
       <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
          red text
       </span>
    </div>
    

    NgStyle支持通过键值对的形式设置DOM元素的样式:

    <div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
       Uses fixed white text on blue background
    </div>
    

    注意到 background-color 需要使用单引号,而 color 不需要。这其中的原因是,ng-style 要求的参数是一个 Javascript 对象,color 是一个有效的 key,而 background-color 不是一个有效的 key ,所以需要添加 ''。

    @Directive({selector: '[ngStyle]'})
    export class NgStyle implements DoCheck {
      private _ngStyle: {[key: string]: string};
      private _differ: KeyValueDiffer<string, string|number>;
    
      constructor(
        private _differs: KeyValueDiffers, 
        private _ngEl: ElementRef, 
        private _renderer: Renderer) {}
    
      @Input()
      set ngStyle(v: {[key: string]: string}) { 
        // <div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
        this._ngStyle = v;
        if (!this._differ && v) {
          this._differ = this._differs.find(v).create();
        }
      }
     
      // 设置元素的样式
      private _setStyle(nameAndUnit: string, value: string|number): void {
        const [name, unit] = nameAndUnit.split('.'); // 截取样式名和单位
        value = value != null && unit ? `${value}${unit}` : value;
    
        this._renderer.setElementStyle(this._ngEl.nativeElement, name, value as string);
      }
    }
    

    NgClass

    NgClass接收一个对象字面量,对象的key是CSS class的名称,value的值是truthy/falsy的值,表示是否应用该样式。

    • CSS Class
    .bordered {
        border: 1px dashed black; background-color: #eee;
    }
    
    • HTML
    <!-- Use boolean value -->
    <div [ngClass]="{bordered: false}">This is never bordered</div>
    <div [ngClass]="{bordered: true}">This is always bordered</div>
    
    <!-- Use component instance property -->
    <div [ngClass]="{bordered: isBordered}">
       Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
    </div>
    
    <!-- Class names contains dashes -->
    <div[ngClass]="{'bordered-box': false}">
       Class names contains dashes must use single quote
    </div>
    
    <!-- Use a list of class names -->
    <div class="base" [ngClass]="['blue', 'round']"> 
      This will always have a blue background and round corners
    </div>
    

    NgFor

    NgFor指令用来根据集合(数组),创建DOM元素,类似于ng1中的ng-repeat指令

    <div class="ui list" *ngFor="let c of cities; let num = index"> 
      <div class="item">{{ num+1 }} - {{ c }}</div>
    </div>
    

    使用trackBy提高列表的性能

    @Component({
      selector: 'my-app',
      template: `
        <ul>
          <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
        </ul>
        <button (click)="getItems()">Refresh items</button>
      `,
    })
    export class App {
    
      constructor() {
        this.collection = [{id: 1}, {id: 2}, {id: 3}];
      }
      
      getItems() {
        this.collection = this.getItemsFromServer();
      }
      
      getItemsFromServer() {
        return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
      }
      
      trackByFn(index, item) {
        return index; // or item.id
      }
    }
    

    NgNonBindable

    NgNonbindable指令用于告诉Angular编译器,无需编译页面中某个特定的HTML代码片段

    <div class='ngNonBindableDemo'>
        <span class="bordered">{{ content }}</span>
        <span class="pre" ngNonBindable>
          &larr; This is what {{ content }} rendered
        </span>
    </div>
    

    Angular4.x新特性

    If...Else Template Conditions
    语法

    <element *ngIf="[condition expression]; else [else template]"></element>
    

    使用实例

    <ng-template #hidden>
      <p>You are not allowed to see our secret</p>
    </ng-template>
    <p *ngIf="shown; else hidden">
      Our secret is being happy
    </p>
    

    <template> --><ng-template>
    使用实例

    import { Component, OnInit } from '@angular/core';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/observable/of';
    import 'rxjs/add/operator/delay';
    
    @Component({
      selector: 'exe-app',
      template: `
       <ng-template #fetching>
          <p>Fetching...</p>
       </ng-template>
       <p *ngIf="auth | async; else fetching; let user">
          {{user.username }}
       </p>
      `,
    })
    export class AppComponent implements OnInit {
      auth: Observable<{}>;
    
      ngOnInit() {
        this.auth = Observable
          .of({ username: 'semlinker', password: 'segmentfault' })
          .delay(new Date(Date.now() + 2000));
      }
    }
    

    NOTE:

    使用[hidden]属性控制元素可见性存在的问题

    <div [hidden]="!showGreeting">
      Hello, there!
    </div>
    

    上面的代码在通常情况下,都能正常工作。但当在对应的DOM元素位置上设置display:flex属性时,尽管[hidden]对应的表达式true,但元素却能正常显示。对于这种特殊情况,则推荐使用*ngIf。

    直接使用 DOM API 获取页面上的元素存在的问题

    @Component({
      selector: 'my-comp',
      template: `
        <input type="text" />
        <div> Some other content </div>
      `
    })
    export class MyComp {
      constructor(el: ElementRef) {
        el.nativeElement.querySelector('input').focus();
      }
    }
    

    以上的代码直接通过 querySelector() 获取页面中的元素,通常不推荐使用这种方式。更好的方案是使用 @ViewChild 和模板变量,具体示例如下:

    @Component({
      selector: 'my-comp',
      template: `
        <input #myInput type="text" />
        <div> Some other content </div>
      `
    })
    export class MyComp implements AfterViewInit {
      @ViewChild('myInput') input: ElementRef;
    
      constructor(private renderer: Renderer) {}
    
      ngAfterViewInit() {
        this.renderer.invokeElementMethod(
            this.input.nativeElement, 'focus');
        }
    }
    

    另外值得注意的是,@ViewChild() 属性装饰器,还支持设置返回对象的类型,具体使用方式如下:

    @ViewChild('myInput') myInput1: ElementRef;
    @ViewChild('myInput', {read: ViewContainerRef}) myInput2: ViewContainerRef;
    

    若未设置 read 属性,则默认返回的是 ElementRef 对象实例。

  • 相关阅读:
    苹果一体机发射Wi-Fi
    iphone 屏蔽系统自动更新,消除设置上的小红点
    data parameter is nil 异常处理
    copy与mutableCopy的区别总结
    java axis2 webservice
    mysql 远程 ip访问
    mysql 存储过程小问题
    mysql游标错误
    is not writable or has an invalid setter method错误的解决
    Struts2中关于"There is no Action mapped for namespace / and action name"的总结
  • 原文地址:https://www.cnblogs.com/Juphy/p/7291680.html
Copyright © 2020-2023  润新知