在Angular中,一个组件通常只有一个HTML模板。但是,你可以通过使用Angular的ngTemplateOutlet
指令来实现一个组件有多个HTML模板的需求。
首先,创建一个组件,例如MultiTemplateComponent
:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-multi-template',
template: `
Template 1
Template 2
`
})
export class MultiTemplateComponent {
@Input() template: string;
get selectedTemplate() {
switch (this.template) {
case 'template1':
return this.template1;
case 'template2':
return this.template2;
default:
return null;
}
}
}
在上面的代码中,template
属性用于指定要显示的模板。根据template
属性的值,selectedTemplate
属性将返回相应的模板。
然后,在父组件中使用MultiTemplateComponent
,并通过设置template
属性来选择要显示的模板:
这将显示模板1的内容。
这将显示模板2的内容。
通过这种方式,你可以在一个组件中实现多个HTML模板的需求。