角2と兄弟要素をレンダリング

Question

角2で書いた角1のグリッドを書き直し中です。グリッドには、行（tr）を展開して詳細を表示する機能があります。私がAngular 1で行ったやり方は、trに属性ディレクティブを置くことでした。この指令は$ compileで新しいtrを作成し、その前にtrの後ろに挿入します。最初のtrのボタンがクリックされると、その下のボタンが表示されます。私はしばらくの間、角度2でこれを行う方法を理解しようとしていて、アイデアがなくなってしまっています。私は兄弟としてではなく、別のコンポーネントの内部でコンポーネントを動的にレンダリングする方法を考え出しました。誰かが少なくとも私を正しい方向に向けることができればと願っていました。ここで私は中列アンギュラ1に何をしたかの一般的な考えはあるNG-場合TRからの行が前にある、この1：

 template = '<tr class="cs-grid-detail-row" ng-if="row.isExpanded"><td colspan="' + (colCount || tds.length) + '"><' + component + ' data="data"></' + component + '></td></tr>'; 
     tr.after($compile(template)(scope)); 

Answer 1

私は実際にViewContainerRefを理解し、それが兄弟のようにコンポーネントを作成することにしたらそれは非常に簡単であることが判明したので、共有したい。私はtr [grid-row]のセレクタでグリッド行のコンポーネントを作成することから始めました。正しくあなたが解決TRとTDに包まれなければならコンポーネントのテンプレートをレンダリングするために、このためにもちろん

this.resolver.resolveComponent(this.row.component).then(factory=>{ 
     const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector); 
     var cmp = this.vcRef.createComponent(factory, 0, injector, []); 
     cmp.instance.colCount = this.columns.length + 1; 
     cmp.instance.row = this.row; 

    }); 

：ngOnInitで、そのコンポーネントの中に、私はこれをしませんでした。 tdは私が列数を渡す理由ですので、colspanを実行できます。