Title
Content
使用抽象类和泛型实现抽象组件,配合内容投影实现组件的灵活性。
在组件中定义一个抽象类,作为该组件的基类,具体的组件继承该类并实现其中的抽象方法。在这个基类中,使用泛型定义一些可以复用的属性和方法,以增强组件的灵活性。
同时,在该组件中使用ng-content
标签实现内容投影,可以将需要动态展示的内容作为标签中的子元素传入。
具体的代码示例如下:
//抽象类
export abstract class AbstractComponent {
data: T;
abstract method(): void;
}
//具体组件
@Component({
selector: 'app-concrete',
template: `
{{header}}
`
})
export class ConcreteComponent extends AbstractComponent<{ title: string }> {
@Input() header: string;
method() {
console.log(this.data.title);
}
}
在使用该组件时,可以像下面这样传入需要展示的内容:
Title
Content
这样,即使是多个不同的组件,只要它们都继承自AbstractComponent
,并使用ng-content
实现内容投影,就可以轻松实现组件的复用。