角度2

Question

RE DUPLICATEにおけるコンポーネントテンプレートの使用内容：「この質問は前に尋ね、すでに答えを持ってきた」を

だから、この質問は私はそれを尋ね後10日を頼まれましたか？誰かがタイムスタンプを読む方法を知らない。

---

私は特に余計なコードおよび/またはDOMノードのトンせずに、それは難しいか、おそらく不可能アンギュラ1に些細だったことを行うために作る角度2に苦しんでいます。 :(

私は、入力ボックスでキーストロークの洗練された処理を行い、ドロップダウンリストに動的に表示されるクエリコントロールを持っていました。検索されるアイテムはどのタイプでもよく、ドロップダウンリストアイテムは。他の私は、同様の検索を持ってどこかを

<search-box [query-provider]='userFinder'> </search-box> 

：単純な文字列または複雑なインラインテンプレート例えば

、私はそれがユーザーオブジェクトの一覧を照会し、デフォルトのテンプレートを使用して（例えばtoString）にそれらを表示使用する場合があります結果リストに各ユーザーの詳細を表示したいので、 emplateインライン、検索ボックスの子として：

<search-box [query-provider]='userFinder'> 
     <!-- this is used as a template for each result item in the 
      dropdown list, with `result` bound to the result item. --> 
     <div> 
      <span class='userName'>result.name</span> 
      <span class='userAge'>result.age</span> 
      <address [model]='result.address'><address> 
     </div> 
    </search-box> 

検索ボックスの私の実装では、テンプレートとして使用し、検索語の中で正しい位置にそれを使用するすべての子コンテンツがあるかどうかを決定する必要があります

ボックステンプレート。

@Component({ 
    select: 'search-box', 
    template: ` 
     <div somestuff here> 
      <input morestuff here> 
      <ul this is where my dropdown items will go> 
       <li *ng-for="#item of model.listItems" 
        TEMPLATE FOR ITEMS SHOULD GO HERE 
       </li> 
      </ul> 
     </div>` 
    ... 

は角1で、私は簡単にその場所に子テンプレートをtransclude可能性があり、適切な範囲にバインドし、または私は動的にテンプレートをコンパイルできます。私はAngular 2でこれを動作させることは全くできません。

ここに<ng-content>を使用すると、最初の<li>にのみ表示されます。

Answer 1

あなたがngForTemplateで簡単にこれを行うことができ、ここで同様の質問Custom template(transclusion without ng-content) for list component in Angular2

のための私の詳細な答えは

https://stackoverflow.com/a/36535521/306753

Answer 2

Angular2で

• DynamicComponentLoader（Plunker example）

も参照あるAngular 2 dynamic tabs with user-click chosen componentsように使用することができる

：

constructor(private dcl: DynamicComponentLoader, private injector: Injector, private ref:ElementRef) {} 

    ngAfterViewInit() { 
    this.dcl.loadIntoLocation(ChildComponent, this.ref, 'child').then((cmp) => { 
     cmp.instance.someProperty = 'xxx'; 
    }); 
    } 

• TemplateRefとViewContainerRef（Plunker example私が作成されていない、私は作成者が気にしない願っています）

Answer 3

私はいくつかのテストを行い、これはサポートされていないようです。以下では動作しません：

@Component({ 
    selector: 'sub', 
    template: ` 
    Sub component : 

    <h3>#1</h3> 

    <template ngFor #elt [ngForOf]="list"> 
     <div>{{elt}}</div> 
     <ng-content></ng-content> 
    </template> 

    <h3>#2</h3> 

    <ng-content ngFor #elt [ngForOf]="list"></ng-content> 
    ` 
}) 

でもループのtemplate構文で。

ただし、これはコンテンツを提供するときに機能します。これはおそらくあなたの回避策かもしれません。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <sub> 
     <div>from parent</div> 
     <template ngFor #elt [ngForOf]="list"> 
     <div>{{elt}} - parent</div> 
     </template> 
    </sub> 
    `, 
    directives: [ SubComponent ] 
}) 

私のテストに使用したplunkr：https://plnkr.co/edit/a06vVP?p=previewを参照してください。

私もこれに関する問題（スロット）を見た：

• https://github.com/angular/angular/issues/3397