У меня есть несколько <ng-template>
в моем компоненте. Я хочу выбрать только один шаблон и отобразить его внутри <ng-container>
.
Вот мой код:
карта-component.component.ts
@Component({
selector: 'card-component',
templateUrl: './card-component.component.html',
styleUrls: ['./card-component.component.scss']
})
export class CardComponent implements OnInit {
@Input() layout: string; // this would be the name of the template
layout1, layout2, layout3
layoutRef: any;
constructor() {}
ngOnInit() {
this.layoutRef = // Get templateRef based on this.layout and render it inside <ng-container>
}
}
карта-component.component.html
<div class="card">
<ng-container
[ngTemplateOutlet]="layoutRef">
</ng-container>
</div>
<ng-template #layout1>
this is a template
</ng-template>
<ng-template #layout2>
this is a template
</ng-template>
<ng-template #layout3>
this is a template
</ng-template>
<ng-template #layout4>
this is a template
</ng-template>
<ng-template #layout5>
this is a template
</ng-template>
Использование
<card-component [layout]="'layout3'"></card-component>
Я знаю, что могу сделать это с ngSwitchCase
, но хотел знать, возможно ли это сделать без использования ngSwitchCase
.