我如何向ng-template添加属性？

Question

我有一个搜索组件，带有从指令TableHeaderDirective派生的ng-template

enter code here

@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

代替阅读模板参考，您可以阅读指令参考。这样您就可以在组件内部访问指令模板引用和input属性。

尝试一下

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>