Angular 将多个模板传递给组件 [英] Angular pass multiple templates to Component

问题描述

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

I'm trying to create a component that accepts multiple templates as inputs. This is the example I have:

@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>;
}

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

As you can see it's a fairly simple component that I'm trying out. This component simply accepts the data of the items to be displayed as well as the template of the item. This component can be used like so:

<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< 读取该模板.元素引用>;.

As shown above I'm passing the template using ng-content which is then read by the DataListComponent with @ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>;.

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

My question is whether it is possible to pass multiple templates to a component.

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

As an example one would pass the template for the items, but a different template is needed in case it's the first item. This would mean that the check of the first item would be made in the DataListComponent but then use a template specified by the component using it.

简单示例:

我可以做类似的事情来满足这一点:

I can do something like so to cater for this:

@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 的组件指定的，因此将始终是相同的模板.

However like so the "Next Template" is not specified by the component using the DataListComponent and therefore will always be the same template.

推荐答案

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

I solved this same issue by using the string selector available to the ContentChild decorator.

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

You will need to specify template variables when using your data-list component:

<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>

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

Then, inside your data-list component class, assign the template variables to local variables on the component:

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

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

After this, you'll be able to render the passed-in templates from your data-list component.

@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 将多个模板传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！