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

【问题标题】：Angular 10 - Extended component how to reuse base component's templateAngular 10 - 扩展组件如何重用基础组件的模板
【发布时间】：2021-01-08 16:57:12
【问题描述】：

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

【问题讨论】：

您似乎走错了路。组件通常是组合而不是扩展它们。您能否解释一下为什么首先需要这种扩展？
我对被证明是错误的持开放态度，但我认为这不是您真正想要这样做的方式。我可以想象你的父组件中的一个元素有一个指令，该指令在ngOnInit 循环期间自动插入你的基础组件，不过也可能带有参数。
感谢您回复我，我有理由更新了问题。
ng-content 非常适合您的问题，您可以将它放在 ExtendedComponent 中，当您想使用它时，请执行，你有没有考虑过使用这种方法？

标签： angular angular2-template

【解决方案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);
    }
}

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

【讨论】：