主页 / 问题 / 551347
Accepted
Qwertiy
Asked:2020-08-03 07:40:11 +0000 UTC2020-08-03 07:40:11 +0000 UTC

如何将可重复元素模板传递给组件？

  • 772

我想在我的组件内部传递类似ng-contentinngFor的内容。但关键是我需要将可重复元素传递给被嵌入的元素。为第一个角度找到了类似的东西： http ://plnkr.co/edit/aZKFqPJmPlfTVRffB0Cc?p=preview 。

第二次怎么做？

PS：这个问题是英文的。

angular2

1 个回答

  1. Best Answer

    为此你应该使用ngForTemplate：

    https://plnkr.co/edit/mpuQse2QuyP7QHXL7wM1?p=preview

    @Component({
  selector: 'foo',
  template: `
    <h1>I am foo</h1>
    <div>
      <template ngFor [ngForOf]="data" [ngForTemplate]="itemTemplate"></template>
    </div>
  `
})
export class Foo {
  @Input() data: any[];
  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
}

@Component({
  selector: 'my-app',
  template: `<h1>Angular 2 Systemjs start</h1>
    <foo [data]="items">
      <template let-item>
        <div>item: {{item}}</div>
      </template>
    </foo>
 `,
  directives: [Foo],
})
export class AppComponent {
    items = [1, 2, 3, 4];
}

    标签template可以替换为属性：

    https://plnkr.co/edit/jB4qzx9Zd3JLkyenu9f3?p=preview

    <foo [data]="items">
   <div template="let item">item: {{item}}</div>
</foo>

    嵌入内容的范围是什么？

    它可以完全访问传输组件的范围，其中指定的变量let。如果该范围内已经存在这样的变量，则重新定义它。转发器组件的作用域对模板不可用。

    http://plnkr.co/edit/VzT9koNXzAx3B1qvHuJ8?p=preview

    PS：这是yurzui回答的更新翻译。

    • 1

相关问题