Как добавить атрибут в шаблон ng? - PullRequest
Новая
       39

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

1 голос
/ 16 января 2020

У меня есть поисковый компонент с 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>

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

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

1 Ответ

2 голосов
/ 16 января 2020

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

Попробуйте это

component.ts 

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

Пример

компонент. html

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