在angular2中使用组件模板的内容

Question

重复："This question has been asked before and already has an answer. "

所以这个问题被问了10天之后我问了？有人不知道如何阅读时间戳。

我正在与 Angular 2 作斗争，这使得 Angular 1 中微不足道的事情变得很难或不可能完成，尤其是在没有大量多余代码的情况下 and/or DOM 节点。 :(

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

例如，我可能会使用它查询用户对象列表并使用默认模板显示它们（例如 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>。

Answer 1

Angular2 中有

DynamicComponentLoader (Plunker example)

另见

可以像这样使用：

  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 and ViewContainerRef (Plunker example不是我创作的，希望创作者不要介意）

Answer 2

我做了一些测试，似乎不支持。以下不起作用：

@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

Answer 3

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

在angular2中使用组件模板的内容

Use content of component template in angular 2

angular2-directives

angular2-template

angular