2017-04-13 64 views
0

我注意到,如果我們根據函數聲明[ngClass],應用程序不斷調用函數。或者,如果我們綁定到一個布爾變量,它也檢查值,如果什麼都沒有發生。Angular 2如何添加一個類只有當有變化或發生什麼事

我想知道是否有一種方法可以獲得ngClass的相同效果,但僅在發生「某些事情」時才調用該函數或檢查布爾值。按下按鈕或按任意按鈕。

我不知道解決方案是否可以使用ngChange,但我沒有看到改變類的方式,然後直接在控制器中引用DOM元素,我試圖逃避。

回答

0

使用:主機( ..)和@HostBinding

假設您有一個組件,您希望根據某些設置應用不同的CSS類,例如指定時的.yellow樣式以及用紅色指定時的.red樣式。

這裏需要說明的是,與我們到目前爲止所做的不同,我們不希望將CSS類應用於組件內部的某個元素,而是應用到組件本身。例如:

<styled style="red" _nghost-c0="" ng-reflect-style="red" class="red- 
style"> 
    <div _ngcontent-c0=""> 
     I'm a div that wants to be styled 
    </div> 
</styled> 

儘管如此,可重用性的目的,我們的風格應該是組件本身提供的,所以我們再次使用我們StyledComponent的風格屬性:

@Component({ 
    selector: 'styled', 
    template: ` 
    <div> 
     I'm a div that wants to be styled 
    </div> 
    `, 
    styles: [ 
    ` 
     :host(.yellow-style) { 
     background-color: yellow; 
     border: 1px solid black; 
     display:block; 
     } 

     :host(.red-style) { 
     background-color: red; 
     border: 1px solid black; 
     color: white; 
     display:block; 
     } 
    ` 
    ] 
}) 
export class StyledComponent { } 

正如你所看到的,我們使用special:host(...)選擇器將目標託管組件的元素上的樣式。有關這方面的官方文檔的更多信息。通過這種方式,黃色風格以及.red風格將在主機組件級別可見,而它們將被封裝並且僅適用於我們的StyledComponent中的元素。

接下來,我們定義@Input()屬性,它允許我們傳入樣式配置。

@Component({...}) 
export class StyledComponent { 
    @Input() style; 
} 

我們現在仍然缺少的是基於樣式輸入屬性的值以編程方式設置CSS類我們的主機元素。我們使用@HostBinding此:

import { Component, Input, HostBinding } from '@angular/core'; 

@Component({ ... }) 
export class StyledComponent { 
    @Input() style; 

    @HostBinding('class.yellow-style') yellowStyle:boolean = false; 
    @HostBinding('class.red-style') redStyle:boolean = false; 

    ngOnChanges(changes) { 
    let newStyle = changes.style.currentValue; 

    if(newStyle === 'yellow') { 
     this.yellowStyle = true; 
     this.redStyle = false; 
    } else if(newStyle === 'red') { 
     this.yellowStyle = false; 
     this.redStyle = true; 
    } else { 
     // nothing here.. (fallback?) 
    } 
    } 
} 

在ngOnChanges我們的風格輸入屬性發生變化,我們適當地調整我們的風格標誌。 (注意這並不是最聰明的代碼,但它很簡單,所以你明白了:wink :)。

TEXT FROM:https://juristr.com/blog/2016/01/learning-ng2-dynamic-styles/ ALL MERITS THERE。收集散佈。您也可以在網站上玩遊戲。

2

你完全正確。 ngOnChanges()生命週期掛鉤在任何時候被觸發@Input()屬性發生更改。

例如,

在你的主要成分

<app-child-component [childData]="childData"> Some Text </app-child-component> 

this.service.getData().subscribe((data)=>{ 
    this.childData = data; 
}); 

的那一刻childData值改變

ngOnChanges(changes: SimpleChanges){ 
    if(this.childData){ 
     //when value is present 
     this.assignSomeClass(); 
    } 
} 
assignSomeClass(){ 
    ///your code for ngClass 
} 

注:ChildComponent必須@Input() childData:any[]

+0

非常感謝,是有用的。 – Sam

+0

由2天?你什麼意思?? – Aravind

相關問題