我有这样的嵌套ng-template
结构。
@Component({
selector: 'my-app',
template: `
<list>
<ng-template *ngFor="let item of Items" #ListItem>
<ng-template #ListItemLine>{{ item[0] }}</ng-template>
<ng-template #ListItemLine>{{ item[1] }}</ng-template>
<ng-template #ListItemLine>{{ item[2] }}</ng-template>
I can see this line, but can't get above templates
</ng-template>
</list>
`,
})
export class App {
Items: Array<Array<string>> = [
[ "1-1", "1-2", "1-3", ],
[ "2-1", "2-2", "2-3", ],
[ "3-1", "3-2", "3-3", ],
[ "4-1", "4-2", "4-3", ],
[ "5-1", "5-2", "5-3", ],
]
}
如何ng-component
在我的组件中渲染子项:
@Component({
selector: 'list',
template: `
<ul>
<li *ngFor="let item of Items">
<ng-container *ngTemplateOutlet="item"></ng-container>
</li>
</ul>
`,
})
export class ListComponent {
@ContentChildren('ListItem') public Items;
}
Plunkr https://plnkr.co/edit/Hi1ZqPAAYyIbclUuzRrl?p=preview
先感谢您。
更新
最后,我想将 Angular Material 组件包装到我的组件中,所以如果我能找到比 Material 更好的 UI,我不应该在我的程序中更改 Material 组件的所有精度,我只需要更改我的实现包装 UI 组件。
例如,让我们尝试包装mat-list
组件。我需要为mat-list
容器制作一个包装器,我们称之为my-list
:
@Component({
selector: 'my-list',
template: `
<mat-list>
<ng-content></ng-content>
</mat-list>
`,
})
和一个包装器mat-list-item
:
@Component({
selector: 'my-list-item',
template: `
<mat-list-item>
<ng-content></ng-content>
</mat-list>
`,
})
HTML 渲染结果将是:
- 我的列表
- 垫表
- 我的列表项
- 垫子列表项
- ...
- 我的列表项
- 垫表
每个 Material 组件都被我的包装器包围,因此 Material 附带的指令和样式将不起作用。