Angular将多个模板传递给Component-Java 学习之路

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

@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 中检查第一个项目，但随后使用组件使用它指定的模板 .

Simple example:

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 的组件未指定"Next Template"，因此将始终使用相同的模板 .

2 回答

我通过使用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>
    `
})

回复于 2024-05-06T15:44:36+08:00

试试这个 .

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

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

回复于 2024-05-06T15:44:36+08:00

Angular将多个模板传递给Component

2 回答

相关问题