问题描述:Angular组件中扩展类的实例似乎被覆盖。以下是一个解决该问题的代码示例:
// 基础类定义
export class BaseClass {
protected name: string;
constructor(name: string) {
this.name = name;
}
public getName(): string {
return this.name;
}
}
// 扩展类定义
export class ExtendedClass extends BaseClass {
private age: number;
constructor(name: string, age: number) {
super(name);
this.age = age;
}
public getAge(): number {
return this.age;
}
}
// 组件类定义
@Component({
selector: 'app-my-component',
template: '{{ name }}
'
})
export class MyComponent extends ExtendedClass {
constructor() {
super('John', 25);
}
ngOnInit() {
console.log(this.getName()); // 输出:John
console.log(this.getAge()); // 输出:25
}
}
在上述代码中,MyComponent
组件类扩展了 ExtendedClass
类,ExtendedClass
类又扩展了 BaseClass
类。通过在组件类的构造函数中调用 super
方法来确保基础类的构造函数被正确调用。
在组件类中,可以通过 this.getName()
和 this.getAge()
方法访问到扩展类中定义的方法。
在 ngOnInit
生命周期钩子函数中,可以在组件初始化时访问到扩展类中的属性和方法,并输出它们的值。
这样,扩展类的实例不会被覆盖,而是可以在组件中正常使用。