Блог

Главная - Вопросы по программированию - Предоставьте данные для нескольких ng-содержимого с ngTemplate

Предоставьте данные для нескольких ng-содержимого с ngTemplate

#angular #angular-components #angular-template #ng-template #ng-content

Вопрос:

Я пытаюсь спроецировать данные на несколько ng-содержимого, но через ng-шаблон. что-то вроде этого:

дочерний компонент.ts

 <ng-content select="[first]"></ng-content>

<h3>seperator</h3>

<ng-content select="[second]"></ng-content>

приложение.компонент.ts

 <child>
    <ng-container [ngTemplateOutlet]="template"></ng-container>
</child>

<ng-template #template>
    <h3 first> First </h3>
    <h3 second> Second </h3>
</ng-template>

Проблема в том, что это не работает.
Если я не использую атрибут «выбрать», он работает, но не размещает дивы в нужных местах.

Я пробовал использовать ContentChildren и добавлять TemplateRef вручную в дочерний компонент, но он все равно не будет отображать divs в нужных местах.

Пример Стекблитца: https://stackblitz.com/edit/angular-vdqmkl?file=src/app/child.component.ts

Комментарии:

1. По какой причине у вас не может быть двух шаблонов? Один для»первого», а другой для «второго»? Затем сделайте что-нибудь вроде: <child> <ng-container first [ngTemplateOutlet]="firstTemplate"></ng-container> </child>

2. Этот шаблон действует как «общий» для многих детей, каждый из которых размещает селекторы в разных местах. Я предпочитаю иметь один шаблон, вводить его всем разным дочерним элементам и позволять каждому из них задавать стили и расположение введенного содержимого.

Метки: