在角度2中使用组件模板的内容[重复]答案

【问题标题】：Use content of component template in angular 2 [duplicate]在角度2中使用组件模板的内容[重复]
【发布时间】：2016-04-01 09:48:40
【问题描述】：

RE DUPLICATE：“这个问题之前已经问过并且已经有了答案。”

所以这个问题是在我提出这个问题的 10 天后提出的？？有人不知道如何读取时间戳。

我在 Angular 2 中苦苦挣扎，这使得在 Angular 1 中做一些微不足道的事情变得困难甚至不可能，尤其是在没有大量多余代码和/或 DOM 节点的情况下。 :(

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

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

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

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

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

使用 Angular 1，我可以轻松地将子模板嵌入到该位置并将其绑定到适当的范围，或者我可以动态编译模板。我根本无法让它在 Angular 2 中工作。

如果我在那里使用<ng-content>，它只会出现在第一个<li>。

【问题讨论】：

你有同样的东西吗？

标签： angular angular2-template angular2-directives

【解决方案1】：

您可以使用 ngForTemplate 轻松完成此操作，这是我对类似问题的详细回答 Custom template(transclusion without ng-content) for list component in Angular2

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

【讨论】：

【解决方案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不是我创作的，希望创作者不要介意）

【讨论】：

【解决方案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

【讨论】：