带迭代的Angular 内容投影

发布于01月18日

myComponent.html-<my-component>

<ng-container *ngFor="let item of dataProvider">
    <ng-template *ngTemplateOutlet="tmpContent; context: {$implicit: item, item: item}">
    </ng-template>
</ng-container>

<ng-template #tmpContent let-item="item">
    <div>
        {{item.id}}
        <ng-content></ng-content>
    </div>
</ng-template>

用法:

 <my-component dataProvider='source'>
    <ion-label> test </ion-label>
 </my-component>

它似乎迭代了正确的次数，但显示了<ion-label>，这是内容在最后一次迭代中只投影了一次.那么，有没有可能每次都对这个ionic 标签进行内容投影.我需要用内容投影来实现，而不是ionic 标签可以是任何东西，所以将以声明的方式传递.

推荐答案

您可以将标签作为模板传递，然后在组件中重复使用该模板.在组件中添加一个名为labelTemplate的新输入，该输入传递的是TemplateRef.然后在视图中，您可以像引用任何模板一样引用它--我假设您希望它嵌套在示例中提供的模板中，但它没有理由不在Main for Loop块中.

export class MyComponentComponent {
  /** The template used to display the label */
  @Input() labelTemplate?: TemplateRef<{ $implicit: unknown }>;
}

<ng-template #tmpContent let-item="item">
  <div>
    {{item.id}}
    <ng-template *ngTemplateOutlet="labelTemplate; context: {$implicit: item.name }" />
  </div>
</ng-template>

在消费组件的html模板中，在标记内的任何位置添加标签模板--它不必投影.对模板的引用被传递给my-component元素上的labelTemplate Property属性.

<my-component dataProvider='source' [labelTemplate]="label">
  <ng-template #label let-content>
    <ion-label> test </ion-label>
  </ng-template>
</my-component>

带迭代的Angular 内容投影

推荐答案

Angular相关问答推荐

Angulat 17@ngrx/Signals或全球服务，用什么？

如何跨不同组件使用ng模板

Angular 类型的表单不能分配给分部类型

父母和子元素在17号角不保持同步

Angular 17不接受带点(.)的路径在开发环境中，它直接抛出一个404错误

在父组件的子组件中使用 ng-template

如何重置表单中的特定字段？

可从 Angular2 中的

Angular 5 中服务的生命周期是什么

Angular2 SVG xlink：href

如何将新的 FormGroup 或 FormControl 添加到表单

来自 ngFor 项的动态 routerLink 值给出错误Got interpolation ({{}}) where expression was expected

无法从模块it was neither declared nor imported导出服务

将 Angular 5 升级到 6 时，我得到不兼容的对等依赖(使用 ng update @angular/core)

Angular 2 - 全局 CSS 文件

NG 测试中的调试测试

默认情况下如何在Angular中 Select mat-button-toggle

Angular 2 更改事件 - 模型更改

Angular 5 和material - 如何从 SnackBar 组件更改背景 colored颜色

Angular2动态改变CSS属性