如何向 ng-template 添加属性？

Question

我有一个搜索组件，其 ng-template 派生自指令 TableHeaderDirective

@Directive({
    selector: '[appTableHeader]'
})
export class TableHeaderDirective {
    @Input() filter = 'click'; // pass desired event
    constructor(public tpl: TemplateRef<any>) { }
}

我有这个工作和模板设置。现在我想添加如下过滤器属性：

<sym-search [search]="searchString" [data]="data">
    <ng-template appTableHeadersTemplate>
        <ng-template appTableHeader [filter]="'Username'">
            Username
        </ng-template>
        <ng-template appTableHeader filter="'FirstName'">
            First Name
        </ng-template>
        <ng-template appTableHeader filter="'LastName'">
            Last Name
        </ng-template>
    </ng-template>
</sym-search>

我稍后希望通过获取模板的子项在搜索组件中使用它

@ContentChildren(TableHeaderDirective, { read: TemplateRef })
tableHeaderItems: QueryList<TemplateRef<any>>;

然后循环输出标签

<th *ngFor="let headerItem of tableHeaderItems; index as i;">
{{headerItem.filter}}
    <ng-container *ngTemplateOutlet="headerItem"></ng-container>
</th>

如何访问[过滤器]以便将其添加到第 th 个标签？

我是否需要创建 filterDirective？如果需要，我如何在搜索组件上访问它？

Answer 1

您可以阅读指令参考，而不是阅读模板参考。这样您就可以访问指令模板引用并在组件中输入属性。

试试这个

component.ts

@ContentChildren(TableHeaderDirective, { read: TableHeaderDirective }) tableHeaderItems: QueryList<TableHeaderDirective<any>>;

Example

component.html

<th *ngFor="let headerItem of tableHeaderItems; index as i;">
   {{headerItem.filter}}
    <ng-container *ngTemplateOutlet="headerItem.tpl"></ng-container>
</th>

如何向 ng-template 添加属性？

How do I add a attribute to a ng-template?

angular-template

angular