Внешне введите имя шаблона в Angular6 - PullRequest
Новая
       6

Внешне введите имя шаблона в Angular6

0 голосов
/ 23 января 2019

Мы используем элементы управления PrimeNg в нашем проекте. Мы хотели бы использовать обертку вокруг элемента управления PrimeNg и хотели бы использовать новый элемент управления в нашем проекте. Выполняя этот элемент управления, чтобы сделать новый элемент управления достаточно универсальным, я бы хотел, чтобы шаблоны столбцов, основного текста и нижнего колонтитула определялись извне и передавали их в новый общий элемент управления. Таким образом, управление оберткой остается общим для разных шаблонов.

Пример кода, как показано ниже:

genericControl.component.ts 

<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngIf="needsCheckboxHeader" [attr.rowspan]="rowspan" style="width: 3em"><p-tableHeaderCheckbox></p-tableHeaderCheckbox></th>           
        <ng-container *ngTemplateOutlet="customHeaderTemplateName"></ng-container>
    </tr>
</ng-template>

clientComponent.html 

<ng-template #customColumnHeaders>
<th *ngFor="let column of columns" class="text-align-center" [style.width]="column.width" pResizableColumn>
        {{column.header}}
</th>
<th *ngFor="let item of items" style="width: 150px;">
    <div>
        {{ item }}
    </div>
</th>

Вызов универсального компонента управления из того же файла: 

<div style="margin-top:20px;">
    <grid-object [columnsKeys]="gridColumns" [value]="data" [needsCheckboxHeader]="true" [rowspan]="1" [customHeaderTemplateName]="customColumnHeaders">
    </grid-object>
</div>

Если вы наблюдаете за частью шаблона столбца, есть ссылка на pResizableColumn, который принадлежит элементу управления PrimeNg, который я хотел бы здесь избежать. Можно ли как-то предоставить эти атрибуты компоненту сетки?

...