NgSwitch

有時(shí)候需要根據(jù)不同的條件，渲染不同的元素，此時(shí)我們可以使用多個(gè)ngIf來(lái)實(shí)現(xiàn)。

    
    Var is A 
    Var is B 
    Var is something else

如果myVar的可選值多了一個(gè)'C'，就得相應(yīng)增加判斷邏輯：

 
    Var is A
    Var is B
    Var is C
    
        Var is something else    
    

可以發(fā)現(xiàn)Var is something else的判斷邏輯，會(huì)隨著myVar 可選值的新增，變得越來(lái)越復(fù)雜。遇到這種情景，我們可以使用ngSwitch指令。

    
    Var is A
    Var is BVar is C
    Var is something else

NgStyle

NgStyle 讓我們可以方便得通過(guò) Angular 表達(dá)式，設(shè)置 DOM 元素的 CSS 屬性。

• 設(shè)置元素的背景顏色

  Use fixed yellow background

• 設(shè)置元素的字體大小

   
    
        red text
    

NgStyle 支持通過(guò)鍵值對(duì)的形式設(shè)置 DOM 元素的樣式：

  
     Uses fixed white text on blue background

注意到background-color需要使用單引號(hào)，而color不需要。這其中的原因是，ng-style要求的參數(shù)是一個(gè)Javascript對(duì)象，color是一個(gè)有效的key，而background-color不是一個(gè)有效的key，所以需要添加''。

NgStyle 源碼片段

@Directive({selector: '[ngStyle]'})
export class NgStyle implements DoCheck {  
    private _ngStyle: {[key: string]: string};  
    
    private _differ: KeyValueDiffer;  
    
    constructor(    private _differs: KeyValueDiffers,     
        private _ngEl: ElementRef, private _renderer: Renderer) {}  
        
    @Input()  set ngStyle(v: {[key: string]: string}) {     
        //     
        this._ngStyle = v;    if (!this._differ && v) {     
          this._differ = this._differs.find(v).create();   
           } 
         }   
         
         // 設(shè)置元素的樣式  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 接收一個(gè)對(duì)象字面量，對(duì)象的key是 CSS class 的名稱，value的值是truthy/falsy的值，表示是否應(yīng)用該樣式。

• CSS Class

.bordered {    border: 1px dashed black; background-color: #eee;}

• HTML

    This is never bordered



    This is always bordered



 
    Using object literal. Border {{ isBordered ? "ON" : "OFF" }}




    Class names contains dashes must use single quote




    This will always have a blue background and round corners

NgFor

NgFor 指令用來(lái)根據(jù)集合(數(shù)組) ，創(chuàng)建DOM元素，類似于ng1中ng-repeat指令

 
  {{ num+1 }} - {{ c }}

使用trackBy提高列表的性能

@Component({  
    selector: 'my-app', 
    template: `
    

      
       `item`.`id`
         
    
    
    Refresh items 
`,})
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 編譯器，無(wú)需編譯頁(yè)面中某個(gè)特定的HTML代碼片段。

 
    {{ content }}
    
        ← This is what {{ content }} rendered    
    

注意事項(xiàng)

1.使用[hidden]屬性控制元素的可見(jiàn)性

  Hello, there!

上面的代碼在通常情況下，都能正常工作。但當(dāng)在對(duì)應(yīng)的 DOM 元素上設(shè)置display: flex屬性時(shí)，盡管[hidden]對(duì)應(yīng)的表達(dá)式為true，但元素卻能正常顯示。對(duì)于這種特殊情況，則推薦使用*ngIf。

2.直接使用DOMAPI 獲取頁(yè)面上的元素

@Component({  
    selector: 'my-comp',
    template: `
         
        
 Some other content 
 
`})
export class MyComp {  
    constructor(el: ElementRef) {    
        el.nativeElement.querySelector('input').focus(); 
    }
}

以上的代碼直接通過(guò)querySelector()獲取頁(yè)面中的元素，通常不推薦使用這種方式。更好的方案是使用@ViewChild和模板變量，具體示例如下：

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

另外值得注意的是，@ViewChild()屬性裝飾器，還支持設(shè)置返回對(duì)象的類型，具體使用方式如下：

@ViewChild('myInput') 
myInput1: ElementRef;

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

若未設(shè)置read屬性，則默認(rèn)返回的是ElementRef對(duì)象實(shí)例。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。