継承

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