Question

RE DUPLICATE：＆＃34;之前已经问过这个问题并且已经有了答案。＆＃34;

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

我正在与Angular 2进行斗争，这使得在Angular 1中做一些微不足道的工作变得困难或者甚至是不可能的，特别是没有多余的多余代码和/或DOM节点。：（

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

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

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

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

<search-box [query-provider]='userFinder'>  <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

您可以使用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

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

3 个答案: