2016-01-22 38 views
3

Angular2有沒有辦法讓開發人員檢查一個組件的相應元素是否標記了某個屬性/類?檢查元素是否有attr/class動態標記或不在Angular2中

假設我們有以下的html:

<outer-controller> 
    <label label-directive class='dynamically-set-class' dynamically-set-attribute>just some label</label> 
</outer-controller> 

標記在標籤元件的label-directiveAngular2部件,兩個dynamically-set-classdynamically-set-attribute動態由outer-controller基礎上的用戶輸入來控制。

每次通過label-directive捕獲並因此label-directive應該做的事情動態基礎上運行時屬性/設置類的outer-controller重置類的標籤或屬性,它觸發一個事件。

但是,我無法找到在現有的官方Angular2 DOC任何例子

回答

4

@Input()應該做你想要什麼:

@Directive({ 
    selector: '[label-directive]' 
}) 
export class LabelDirective { 
    @Input('class.dynamically-set-class') _dynamicallySetClass: boolean; 
    @Input('dynamically-set-attribute') _dynamicallySetAttribute: any; 

    ngOnInit() { 
    console.log('class ' + _dynamicallySetClass); 
    console.log('attribute ' + _dynamicallySetAttribute); 
    } 
    ngOnChanges(changes) { 
    .. 
    } 
} 
+0

還有一個問題,如果在運行時的外部控制器改變屬性/類,'@Input()'方法會反映出來嗎?假設out-controller刪除'class.dynamically-set-class','_dynamicallySetClass'會變成'false'? – resec

+0

是的,這個值會自動更新,並且從模板綁定到這個字段將會被修改,當這個值改變的時候'ngOnChanges()'會被調用。使用'class.some-class',你只能檢查一個特定的類是否被設置('boolean'),但對於任意的類你可以直接引用class屬性(比如屬性)'@Input('class ')classes:String;'並檢查包含哪些類。 (不知道它是一個字符串,可能是一個數組) –

+0

剛剛試過你的代碼,'onChanges'方法正在工作,但是兩個'@Input()'不反映實際值,無論是在'constructor'和' onChanges'方法,它們是'undefined',而我可以在'onChanges'方法中進行更改,是否只能監視onChanges方法中的更改? – resec