在Angular中,可以通过使用继承来保留父级HTML。下面是一个示例代码,展示了如何在Angular组件中实现继承,同时保留父级HTML。
父级组件:
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `Parent Component
{{message}}`
})
export class ParentComponent {
message: string = "Hello from parent component";
onClick() {
this.message = "Button clicked in parent component";
}
}
子级组件:
import { Component } from '@angular/core';
import { ParentComponent } from './parent.component';
@Component({
selector: 'child-component',
template: `Child Component
{{message}}`
})
export class ChildComponent extends ParentComponent {
onClick() {
this.message = "Button clicked in child component";
}
}
在上面的示例中,ParentComponent
是父级组件,其中包含一个按钮和一个显示消息的div
。ChildComponent
继承了ParentComponent
,并重写了onClick
方法。子级组件也有自己的模板,其中包含一个按钮和一个显示消息的div
。
要在应用中使用这两个组件,可以在父级组件的模板中添加子级组件的选择器:
这样,父级组件和子级组件的模板都会被呈现,并且可以分别响应它们各自的点击事件。