不能在模塊聲明中使用抽象 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，並使用帶有內容投影的父組件來獲取正確的模板。