Angular 10 - 扩展组件如何重用基本组件的模板

Question

在Angular 10中，我扩展了一个组件，并希望重用基础组件的模板，并在扩展组件中添加相关的html。

编辑：我之所以尝试这样做，是因为我需要基本组件的功能，并在应用程序的另一个区域添加额外的功能。基于本文。

考虑到这些简单的组件，这怎么可能？：

基本组件

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'base-component',
template: `
<p>base-component template</p>
`
})
export class BaseComponentComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}

扩展组件

import { Component, OnInit } from '@angular/core';
import { BaseComponentComponent } from '../base-component/base-component.component';
@Component({
selector: 'extended-component',
template: `
<!-- Add base component template here and not just by copy pasting... -->
<p>add extended-component's relevant html</p>
`
})
export class ExtendedComponentComponent extends BaseComponentComponent implements OnInit {
constructor() {
super();
}
}

Answer 1

下面是我的BaseComponent的简化示例：

//BASE
export class BaseComponent<T> implements OnInit {
public isLoading  = false;
public isEditing = false;
constructor(
protected dataService: EntityService<T>
) {}
ngOnInit() {
}
//other common methods
}
//EXTENDED
@Component({
selector: 'app-user',
templateUrl: '../base.component.html',
styleUrls: ['../base.component.scss']
})
export class UserComponent extends BaseComponent<User> {  
constructor(
protected dataService: UserService
) {
super(dataService);
}
}

基本的html和css模板没有定义到BaseComponent中，只是将它们用于扩展。我创建了基本EntityService和BaseModule，它们只用于导入/导出所有需要的模块。BaseComponent未定义到BaseModule中。整个实现包含很多行，所以我不想在这里写，但如果你有问题，我已经准备好回答了。