2017-05-11 5 views
0

これはまったくばかげた質問かもしれません。私の問題は次のとおりです。私は、実際に子コンポーネントを繰り返す私のメインモジュールテンプレートに複数の* ngForを持っていて、親コンポーネント(vith QueryListとElementRef)のViewChildrenデコレータからクラスとインラインスタイルを直接追加しています。このように、親テンプレートは、かなり基本になります。Angular2はコンポーネントのプロトタイプにnativeElementを追加します

<div #child *ngFor="let child of children"> 
    <app-child-component></app-child-component> 
</div> 

parrentコンポーネントは次のようなものになります。

@ViewChildren('child') children_elements: QueryList<ElementRef>; 
... do whatever I do with children ... 

を私は子コンポーネント内のクラスやスタイルをバインドすることができますかngStyleを使用することを知っています/ ngClass。しかし、私はテンプレートの中のインデックスに基づいてテンプレートの子をターゲットにする必要がある特定のユースケースを持っているので、これらは私にとってはうれしくないので、それらをテンプレートから動的に配列に注入する必要があります。まあ、すべては私の解決策と良いですが、私はこのような唯一の子コンポーネントを繰り返してしまうので、私はそのラッピングdiv要素を取り除くことができる場合、私は疑問に思う:

<app-child-component #child *ngFor="let child of children"></app-child-component> 

問題が角度のことを、私は推測であり、 QueryListは変更不可能なので、アイテムにクラスやスタイルを追加したり削除したりすることはできません。同じことがelementRefとRenderer、またはホスト要素(つまりthis.elementRef.childNodesまたはdocument.querySelectorALl( 'child'))で呼び出された古いclassyのquerySelectorALl()を使用しています。子ノードには単にnativeElementがありません。

私は正しい質問をしているのですが、私の考えでは、このように聞こえるのではないかと思います。それはViewChildren経由で親からアクセスされ、.elementRef.nativeElementのようなものがありますか?」または「繰り返し注入されたコンポーネントを操作できるようにテンプレートビューにアクセスする別の方法はありますか?」(ViewRef、EmbeddedViewおよび他にも、それは私をナッツにする...)。

あなたは、私はおそらくそれをdownvote、私はおそらく自分自身を行うだろう...

ありがとう!

答えて

関連する問題