角度将多个模板传递给组件 [英] 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<ElementRef>;读取.

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>
    `
})

这篇关于角度将多个模板传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！