带有 ngFor 的组件接受模板并将其传递给孩子，怎么做？答案

【问题标题】：Component with ngFor that accept template and pass it to the children, how to do it?带有 ngFor 的组件接受模板并将其传递给孩子，怎么做？
【发布时间】：2018-12-27 11:12:11
【问题描述】：

我正在开发一个 Angular 6 应用程序。我有一个组件 BelloComponent 呈现通过 @Input items 传递的列表。

@Component({
  selector: 'bello',
  template: `
    <ul *ngIf="items?.length">
      <li *ngFor="let item of items">
        ???
      </li>
    </ul>
`
})
export class BelloComponent {
  @Input() items: Array<Object>;
}

而消费者，AppComponent 使用 BelloComponent。如何在 BelloComponent 标签内渲染从 AppComponent 传递的列表？

@Component({
  selector: 'my-app',
  template: `
<bello [items]="cacche_list">
  <b>{{ name }}, puzza value: {{ puzza }}</b>
</bello>`
})
export class AppComponent  {

  cacche_list = [
    { name: 'cacca 1', puzza: 3 },
    { name: 'cacca 2', puzza: 5 },
    { name: 'cacca 3', puzza: 66 },
    { name: 'cacca 4', puzza: 5 },
    { name: 'cacca 5', puzza: 2 },
    { name: 'cacca 6', puzza: 12 },
  ];
}

stackblitz 是这样的：https://stackblitz.com/edit/angular-exbhsv?file=src%2Fapp%2Fapp.component.ts

我想我遗漏了一些东西，如何告诉 BelloComponent 如何在 ngFor 中呈现元素？如何访问 AppComponent 呈现的单个项目？

【问题讨论】：

标签： angular templates components

【解决方案1】：

使用嵌入你可以这样处理它

@Component({
 selector: 'bello',
 template: `
    <ul *ngIf="items?.length">
     <li *ngFor="let item of items">
       <ng-container *ngTemplateOutlet="liTemplate; context: { $implicit: item}"></ng-container>
     </li>
   </ul>
 `
})
export class BelloComponent {
  @ContentChild(TemplateRef) liTemplate: TemplateRef<any>;
  @Input() items: Array<Object>;
}

在你的容器组件中

@Component({
  selector: 'my-app',
  template: `
<bello [items]="cacche_list">
  <ng-template let-item>
     <b>{{ item.name }}, puzza value: {{ item.puzza }}</b>
  </ng-template>
</bello>`
})
export class AppComponent  {

  cacche_list = [
    { name: 'cacca 1', puzza: 3 },
    { name: 'cacca 2', puzza: 5 },
    { name: 'cacca 3', puzza: 66 },
    { name: 'cacca 4', puzza: 5 },
    { name: 'cacca 5', puzza: 2 },
    { name: 'cacca 6', puzza: 12 },
  ];
}

欲了解更多信息，请参阅此博客https://www.kaels-kabbage.com/post/angular-transclusion-with-parameters/

【讨论】：

【解决方案2】：

你可以简单地在bello组件中使用<ng-content></ng-content>



@Component({
  selector: "bello",
  template: `
    <ul *ngIf="items?.length">
      <li *ngFor="let item of items">
        <ng-content></ng-content>
      </li>
    </ul>
  `
})
export class BelloComponent {
  @Input() items: Array<Object>;
}

【讨论】：

【解决方案3】：

唯一缺少的是ngFor 中的{{item.name}}

<ul *ngIf="items?.length">
  <li *ngFor="let item of items">
    {{item.name}}
  </li>
</ul>

Demo

【讨论】：

是的，它适用于这种情况，但如果我想要一个通用模板输入？我想在其他组件中重用我的 BelloComponent，但项目模板必须由消费者组件决定