• 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 对象实例。

  • 相关阅读:
    redis的实现过程
    文件流的操作
    已知json类型根据类型封装集合
    linq小知识总结
    设计模式之策略模式
    jq实现竞拍倒计时
    SqlDependency缓存数据库表小案例
    渗透之路基础 -- 初窥文件解析漏洞
    渗透之路基础 -- 文件上传
    渗透之路进阶 -- SQL注入进阶(盲注和报错注入)
  • 原文地址:https://www.cnblogs.com/Juphy/p/7291680.html
Copyright © 2020-2023  润新知