В Angular 6/7 у меня есть компонент, в который я проецирую такой контент (шаблон ParentComponent):
<my-component [templateNames]="['t1', 't2']">
<ng-template name="t1">...</ng-template>
<ng-template name="t2">...</ng-template>
<ng-template>...</ng-template> <!-- not included in [templateNames] -->
</my-component>
В классе MyComponent
я могу получить QueryList всех шаблонов с помощью декоратора ContentChildren:
@ContentChildren(TemplateRef) templates: QueryList<TemplateRef<any>>;
Проблема в том, что я хочу выполнить код для определенных шаблонов, определенных тем, что ParentComponent установлен с помощью @Input() templateNames
.
processTemplates() {
for (const name of this.templateNames) {
const templateRef = this.getTemplateByName(name);
this.doWork(templateRef);
}
}
getTemplateByName(name) {
const templates = this.templates.toArray();
return templates.find(t => ?); // what can I query to distinguish templates?
}
Проблема в том, что я не знаю, как читать атрибут name
или что-то еще, что я установил в теге ng-template в ParentComponent. Я понятия не имею, как отличить одну TemplateRef от другой;
Имейте в виду, что MyComponent не может делать никаких предположений о том, какие имена будут использоваться, и должны ли обрабатываться все ng-templates - последний в моем примере выше не должен обрабатываются, потому что он не указан в @Input () templateNames. Могу ли я установить в ParentComponent что-нибудь, что поможет мне отличить эти два элемента TemplateRef?