在angular 2中使用组件模板的内容

重复：“这个问题以前被问过，现在已经有答案了。”

那么这个问题是在我问了10天后问的？有人不知道怎么读时间戳

---

我正在与Angular 2做斗争，这使得Angular 1中的琐事很难或不可能完成，尤其是在没有大量多余代码和/或DOM节点的情况下(

在Angular 1中，我有一个查询控件，它对输入框中的击键进行复杂的处理，并在下拉列表中动态显示结果。搜索的项目可以是任何类型，下拉列表项目可以是简单的字符串或复杂的内联模板

例如，我可以使用它查询用户对象列表，并使用默认模板显示它们（例如

toString

）：

在其他地方，我有一个类似的搜索，但我希望结果列表包含每个用户更丰富的视图，因此我提供了一个内联模板，作为搜索框的子项：

  <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>

result.name
结果：年龄

我的搜索框实现需要确定是否有任何子内容用作模板，并在搜索框模板的正确位置使用它

@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>`
    ...

@组件({
选择“搜索框”，
模板：`

在Angular2中有


（）

另见

可以像这样使用：

构造函数（私有dcl:DynamicComponentLoader，私有注入器：注入器，私有ref:ElementRef）{}
ngAfterViewInit（）{
this.dcl.loadIntoLocation（ChildComponent，this.ref，'child'）。然后（（cmp）=>{
cmp.instance.someProperty='xxx'；
});
}


（不是我创造的，我希望创造者不会介意）
我做了一些测试，但这似乎不受支持。以下操作不起作用：

@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>
  `
})

请参阅我用于测试的plunkr:

我还看到了与此（和插槽）相关的问题：



使用NgfortTemplate，您可以轻松做到这一点，下面是我对类似问题的详细回答

你们有没有同样的东西？
@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>
  `
})

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