継承

TIP: このガイドは、すでに基本概念のガイドを読んだことを前提としています。Angular初心者の方は、最初にそちらをお読みください。

AngularコンポーネントはTypeScriptクラスであり、標準のJavaScript継承セマンティクスに従います。

コンポーネントは、任意の基底クラスを拡張できます。

      export class ListboxBase {  value: string;}@Component({ ... })export class CustomListbox extends ListboxBase {  // CustomListboxは`value`プロパティを継承します。}

他のコンポーネントとディレクティブの拡張

コンポーネントが他のコンポーネントやディレクティブを継承すると、基底クラスのデコレーターで定義された一部のメタデータや、デコレーター付きメンバーを継承します。これには、ホストバインディング、入力プロパティ、出力プロパティ、ライフサイクルメソッドなどが含まれます。

      @Component({  selector: 'base-listbox',  template: `    ...  `,  host: {    '(keydown)': 'handleKey($event)',  },})export class ListboxBase {  value = input.required<string>();  handleKey(event: KeyboardEvent) {    /* ... */  }}@Component({  selector: 'custom-listbox',  template: `    ...  `,  host: {    '(click)': 'focusActiveOption()',  },})export class CustomListbox extends ListboxBase {  disabled = input(false);  focusActiveOption() {    /* ... */  }}

上記の例では、CustomListboxはListboxBaseに関連付けられたすべての情報を継承し、セレクターとテンプレートを独自の値で上書きしています。 CustomListboxには2つの入力(valueやdisabled)と、2つのイベントリスナー(keydownやclick)があります。

子クラスは、最終的にすべての祖先クラスの入力、出力、ホストバインディング、および独自の入力、出力、ホストバインディングの_ユニオン_を持ちます。

注入された依存性の転送

もし基底クラスがコンストラクターのパラメーターとして依存性を注入している場合、子クラスではその依存性を明示的にsuper()に渡す必要があります。

      @Component({ ... })export class ListboxBase {  constructor(private element: ElementRef) { }}@Component({ ... })export class CustomListbox extends ListboxBase {  constructor(element: ElementRef) {    super(element);  }}

ライフサイクルメソッドのオーバーライド

基底クラスがngOnInitなどのライフサイクルメソッドを定義する場合、 ngOnInitも実装する子クラスは、基底クラスの実装を上書きします。基底クラスのライフサイクルメソッドを保持したい場合は、superで明示的にメソッドを呼び出します。

      @Component({ ... })export class ListboxBase {  protected isInitialized = false;  ngOnInit() {    this.isInitialized = true;  }}@Component({ ... })export class CustomListbox extends ListboxBase {  override ngOnInit() {    super.ngOnInit();    /* ... */  }}