假设我想制作一个组件来排列它的所有子组件。我应该能够提供元素,例如:
<app-layout-list>
<p>foo</p>
<p>bar</p>
<p>etc</p>
</app-layout-list>
在 app-layout-list 里面应该做类似的事情
<ul>
<li>
<ng-content>
</li>
<ul>
它为每个内容生成一个 li。这可能使用 ng-content 还是我需要做一些更复杂的事情?
最佳答案
当然可以! :)
而且非常简单! ( Directly to the Stackplitz Demo )
Angular 为这类问题提供了完善的 API。
基本上你想要的是拆分你的 <ng-content></ng-content>
在他们的不同部分。
首先,您必须在<li>
中标记要显示的部分。通过指令的元素。实现此目标的最佳方法是通过 Structural Directive
,因为它生成一个 <ng-template></ng-template>
对我们来说,我们稍后需要。
Directive
我们构建的是非常基础的。它只注入(inject) TemplateRef
在构造函数中并将模板保存在“公共(public)变量”中:
list-item.directive.ts
import { Directive, TemplateRef } from '@angular/core';
@Directive({
selector: '[appListItem]'
})
export class ListItemDirective {
public itemTemplate: TemplateRef<any>;
constructor(private templateRef: TemplateRef<any>) {
this.itemTemplate = this.templateRef;
}
}
使用这个指令,我们标记了我们喜欢放置在 <li>
中的 html 元素。元素。
app.component.ts
<app-layout-list>
<p *appListItem>foo</p>
<p *appListItem>bar</p>
<p *appListItem>etc</p>
</app-layout-list>
内部LayoutListComponent
我们通过 @ContentChildren(ListItemDirective) listItems
获取投影元素
layout-list.component.ts
import { Component, ContentChildren, QueryList } from '@angular/core';
@Component({
selector: 'app-layout-list',
templateUrl: './layout-list.component.html',
styleUrls: ['./layout-list.component.css']
})
export class LayoutListComponent {
@ContentChildren(ListItemDirective) listItems: QueryList<ListItemDirective>;
}
终于在 Component template
里面了我们正在遍历 listItems
并放置 TemplateReference
ngTemplateOutlet
中的每一项
layout-list.component.html
<ul>
<ng-container *ngFor="let item of listItems">
<li>
<ng-container [ngTemplateOutlet]="item.itemTemplate"></ng-container>
</li>
</ng-container>
</ul>
演示: Stackblitz Demo
关于html - 如何将 contentchildren 的每个 child 包装在 Angular 中自己的元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50420961/