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

问题描述

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

编辑：之所以尝试此操作，是因为我需要基本组件的功能，并在应用程序的另一个区域中添加其他功能。基于此article。

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

基本组件

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();
    }
}

解决方法

下面是我的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);
    }
}

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

angular angular2-template