不能在模块声明中使用抽象 class Angular 组件

Question

我有一个带有自己标记的基本组件 class BaseComponent ，假设这个组件是<base-component-fun> 。 它的标记是：

<div>
..Base markup
</div>

我通过模块导出此组件并在继承此组件时在其他项目中重用该库 - 并拥有自己的标记 + 基本组件标记：

import { BaseComponent } from 'my-repository/base';

@Component({
  ...
})
export class InheritedComponent extends BaseComponent

带有标记：

<inherited-component-fun>
  ..Inherited markup
  <base-component-fun></base-component-fun>
</inherited-component-fun>

问题来了：我必须在其模块中声明我的基础 class BaseComponent以进行导出：

@NgModule({
  declarations: [BaseComponent],

否则不会构建模块。 但不允许声明抽象 class。

我该怎么办？ 我试图在论坛中找到解决方案，但我找不到。 所以我最终使基础 class 非抽象，这从设计的角度来看并不是很好 - 我想在基础 class 中拥有一些抽象属性。

Answer 1

通过查看您的代码，我看到您正在尝试呈现这样的内容。

component specific template
...
base class/component template
...
component specific template

这不适用于您尝试做的方式。 你不能渲染一个 class 而不在模块中声明它，你不能声明一个抽象的。

可能的解决方案，

1.使用内容投影- https://angular.io/guide/content-projection

将基础 class 作为父级，并使用内容投影来填充所需的部分。 您可以将子组件放在这里

2.使用完整的模板

如果是简单的结构更改（可能像添加card class 等），我建议您再次使用完整的模板。

3. 同时使用抽象 class 和内容投影

对子组件使用抽象 class，并使用带有内容投影的父组件来获取正确的模板。