Как добавить атрибут в шаблон ng?

У меня есть компонент поиска с ng-шаблоном, полученным из директивы 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

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

Как я могу получить доступ к [Filter], чтобы добавить его в тег th?

Нужно ли создавать filterDirective и, если да, то как мне получить к нему доступ в компоненте поиска?

Всего 1 ответ


Вместо чтения ссылки на шаблон вы можете прочитать ссылку на директиву. так что вы можете получить доступ к ссылке на шаблон директивы и свойству ввода внутри вашего компонента.

Попробуй это

component.ts

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

пример

component.html

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

Есть идеи?

10000