在Angular中,可以使用ngTemplateOutlet指令来创建多个模板实例。以下是一个示例:
首先,在父组件中定义多个模板,并通过ng-template指令进行命名:
模板1
模板2
然后,在父组件中定义一个变量来存储要使用的模板,以及一个方法来切换模板:
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
@ViewChild(TemplateRef)
template1: TemplateRef;
@ViewChild(TemplateRef)
template2: TemplateRef;
currentTemplate: TemplateRef;
changeTemplate(template: TemplateRef) {
this.currentTemplate = template;
}
}
最后,在父组件的模板中使用ngTemplateOutlet指令来动态渲染模板实例。
在上面的例子中,我们使用了两个按钮来切换模板,点击按钮后,会调用changeTemplate方法来更新currentTemplate变量的值,从而切换模板。ng-container中的ngTemplateOutlet指令会根据currentTemplate的值来渲染对应的模板。
注意:ngTemplateOutlet指令只能在ng-container元素中使用,并且只能引用通过ng-template定义的模板。