2016-10-18 5 views
2

私は動的要素要素が動的に作成された場合、ホスト要素に[ngClass]をプログラムで追加する適切な方法は何ですか?

initElem() { 
let childElFactory = this._cfRes.resolveComponentFactory(childElCmp); 
// _cfRes is ComponentFactoryResolver 
let childElRef = this._vcRef.createComponent(childElFactory); 
// _vcRef is ViewContainerRef 
childElRef.instance.childElModel = someModel; 
} 

を作成していると私はchildElCmpの要素をホストするために

[ngClass]="{active: childElModel.active}" 

attribiuteと

#childEl 

attribiuteを追加します。

elementRefを適切な方法で使用したくないです。 レンダラーは私が探しているものだと思っていますが、正しい方法で使用する方法はわかりません。

答えて

2

[ngClass]...またはその他のバインディングを動的に追加されたコンポーネントに適用することはできません。

あなたが動的に追加されたコンポーネントに

@HostBinding('class.active') isActive:boolean = false; 

を追加しactiveクラスはコンポーネントから削除/追加取得するには

childref.instance.isActive = true; 

使用することができます。

それとも、親コンポーネントにElementRefを注入し、

elementRef.nativeElement.querySelector('child-el').classList.add('active'); 
+0

感謝を使用することができます。 @HostBindingは私が探していたものです。 – Sakala

+1

オブジェクトモデルまたは配列をコンポーネントの入力として使用する場合、DoCheckを拡張してデータを更新する必要があります。 – Sakala

関連する問題