Передача контекста в ng-template при использовании его локальной ссылки
У меня есть компонент, который выглядит так:
<nz-collapse>
<nz-collapse-panel *ngFor = "let item of items" [nzHeader] = "collapseHeader">
<div class = "item">
<!-- some content here -->
</div>
</nz-collapse-panel>
</nz-collapse>
<ng-template #collapseHeader let-item>
<nz-divider [nzText] = "item.name"></nz-divider>
</ng-template>
Как я могу передать каждый элемент в качестве контекста моему шаблону ng? библиотека не предлагает способ сделать это. (nzHeader принимает только строки и TemplateRef в качестве аргументов, никаких других типов представлений)
@NicolasB Я думаю, что ваше решение на самом деле лучшее в этом случае, а вовсе не хакерское.
@NicolasB, вы должны добавить это как ответ.
Хорошо, я разместил это как ответ. Дайте мне знать, если все это работает хорошо.
Ответы 1
Один из способов решить эту проблему — полностью обойти необходимость предоставления контекста шаблону. Вместо этого давайте поставим Input() компоненту, потому что это просто.
Давайте создадим CollapseWrapperComponent с app-collapse-wrapper-component в качестве селектора. Вот ts и html:
export class CollapseWrapperComponent {
@Input() public item: Item;
}
<nz-collapse-panel [nzHeader] = "collapseHeader">
<ng-content></ng-content>
</nz-collapse-panel>
<ng-template #collapseHeader>
<nz-divider [nzText] = "item.name"></nz-divider>
</ng-template>
И затем в родительском компоненте html мы теперь можем перебирать этот компонент в нашем *ngFor:
<nz-collapse>
<app-collapse-wrapper *ngFor = "let item of items">
<div class = "item">
<!-- some content here -->
</div>
</app-collapse-wrapper>
</nz-collapse>
Теперь у нас в основном есть один <ng-template> для каждого item, поэтому контекст не нужен.
Я не могу найти чистый способ сделать это. Я предполагаю, что хакерский способ сделать это — создать небольшой компонент, который будет принимать «элемент» в качестве своего @Input(), а его HTML будет иметь элемент <nz-collapse-panel> в своем корне (без ngFor, очевидно, ), ng-контент внутри и ng-шаблон после. Шаблону больше не потребуется переменная шаблона, поскольку «элемент» определен в самом компоненте. Тогда ваша строка *ngFor относится к вашему компоненту, а не к nz-collapse-panel.