Разрешает ли Angular / AngularDart компоненты отображать произвольные дочерние компоненты?

Question

Я создаю компонент календаря и хотел бы предоставить пользователям следующий API:

<fancy-calendar>
    <my-custom-day [day]="day"></my-custom-day>
</fancy-calendar>

Где fancy-calendar отвечает за отслеживание текущего месяца, который выбрал пользователь.Внутренне я хотел бы реализовать это, используя что-то вроде * ngFor:

<div *ngFor="let day of daysInMonth">
    <ng-content [day]="day"></ng-content>
</div>

Это не похоже на работу, потому что ng-content не может отправлять произвольные значения (в данном случае, текущий день.)

Нужно ли для этого написать специальную директиву?Как я могу дать пользователям возможность использовать свой собственный компонент в течение нескольких дней?

Answer 1

Вы можете сделать это с помощью динамической загрузки компонентов.https://github.com/dart-lang/angular/blob/7f6858bc48c1d2a454a4bc350077d67c277c6516/doc/faq/component-loading.md

Я ответил на аналогичный вопрос для TS в Угловые динамические вкладки с выбранными пользователем компонентами

Самый простой способ использовать это с *ngFor - этосоздайте вспомогательный компонент, которому вы передаете тип или фабрику для компонента, который вы хотите создать.

Другим способом будет использование https://webdev.dartlang.org/api/angular/angular/NgTemplateOutlet-class, когда пользователь передает содержимое в виде шаблона

<fancy-calendar>
    <ng-template> 
      <my-custom-day [day]="day"></my-custom-day>
    </ng-template>
</fancy-calendar>

и fancy-calender использует NgTemplateOutlet для его рендеринга.С *ngFor https://webdev.dartlang.org/api/angular/angular/NgFor/ngForTemplate можно также использовать для рендеринга одного и того же шаблона несколько раз.