gpt4 book ai didi

Angular 将多个模板传递给 Component

转载 作者:太空狗 更新时间:2023-10-29 17:08:24 26 4
gpt4 key购买 nike

我正在尝试创建一个接受多个模板作为输入的组件。这是我的例子:

@Component({
selector: 'data-list',
styles: [
require('./data-list.component.scss')
],
template: `
<ng-template
*ngFor="let item of itemsData"
ngFor let-item [ngForOf]="[item]" [ngForTemplate]="itemTemplate"
></ng-template>
`
})

export class DataListComponent {
@Input() itemsData: any[];
@ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>;
}

如您所见,这是我正在试用的一个相当简单的组件。该组件只接受要显示的项目的数据以及项目的模板。这个组件可以像这样使用:

<data-list [itemsData]="data">
<ng-template let-item>
<h1>{{ item.header }}</h1>
<div>{{ item.content }}</div>
</ng-template>
</data-list>

如上所示,我使用 ng-content 传递模板然后由 DataListComponent 读取与 @ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>; .

我的问题是是否可以将多个模板传递给一个组件。

例如,可以为项目传递模板,但如果它是第一个项目,则需要一个不同的模板。这意味着将在 DataListComponent 中检查第一项。但随后使用由使用它的组件指定的模板。

简单示例:

enter image description here

我可以做这样的事情来满足这个需求:

@Component({
selector: 'data-list',
styles: [
require('./data-list.component.scss')
],
template: `
<span *ngFor="let item of itemsData; let i = index" >
<ng-template *ngIf="i > 0; else nextTmpl"
ngFor let-item [ngForOf]="[item]" [ngForTemplate]="itemTemplate"
></ng-template>
</span>
<ng-template #nextTmpl>
Next
</ng-template>
`
})

然而,使用 DataListComponent 的组件并未指定“下一个模板”因此将始终是相同的模板。

最佳答案

我通过使用 ContentChild 装饰器可用的字符串选择器解决了同样的问题。

使用数据列表组件时需要指定模板变量:

<data-list [itemsData]="data">
<ng-template #firstItemTemplate let-item>
<h1 style="color:red;">{{ item.header }}</h1>
<div>{{ item.content }}</div>
</ng-template>
<ng-template #standardTemplate let-item>
<h1>{{ item.header }}</h1>
<div>{{ item.content }}</div>
</ng-template>
</data-list>

然后,在您的数据列表组件类中,将模板变量分配给组件上的局部变量:

@Input() itemsData: any[];
@ContentChild('firstItemTemplate') firstItemTemplate: TemplateRef<ElementRef>;
@ContentChild('standardTemplate') standardTemplate: TemplateRef<ElementRef>;

在此之后,您将能够从数据列表组件呈现传入的模板。

@Component({
selector: 'data-list',
styles: [
require('./data-list.component.scss')
],
template: `
<span *ngFor="let item of itemsData; let i = index" >
<ng-template *ngIf="i == 0; else nextTmpl"
ngFor let-item [ngForOf]="[item]" [ngForTemplate]="firstItemTemplate"
></ng-template>
<ng-template #nextTmpl
ngFor let-item [ngForOf]="[item]" [ngForTemplate]="standardTemplate"
></ng-template>
</span>
`
})

关于Angular 将多个模板传递给 Component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43631813/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com