我注意到,如果我們根據函數聲明[ngClass],應用程序不斷調用函數。或者,如果我們綁定到一個布爾變量,它也檢查值,如果什麼都沒有發生。Angular 2如何添加一個類只有當有變化或發生什麼事
我想知道是否有一種方法可以獲得ngClass的相同效果,但僅在發生「某些事情」時才調用該函數或檢查布爾值。按下按鈕或按任意按鈕。
我不知道解決方案是否可以使用ngChange,但我沒有看到改變類的方式,然後直接在控制器中引用DOM元素,我試圖逃避。
我注意到,如果我們根據函數聲明[ngClass],應用程序不斷調用函數。或者,如果我們綁定到一個布爾變量,它也檢查值,如果什麼都沒有發生。Angular 2如何添加一個類只有當有變化或發生什麼事
我想知道是否有一種方法可以獲得ngClass的相同效果,但僅在發生「某些事情」時才調用該函數或檢查布爾值。按下按鈕或按任意按鈕。
我不知道解決方案是否可以使用ngChange,但我沒有看到改變類的方式,然後直接在控制器中引用DOM元素,我試圖逃避。
使用:主機( ..)和@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。收集散佈。您也可以在網站上玩遊戲。
你完全正確。 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[]
非常感謝,是有用的。 – Sam
由2天?你什麼意思?? – Aravind