継承

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 {  @Input() value: string;  handleKey(event: KeyboardEvent) {    /* ... */  }}@Component({  selector: 'custom-listbox',  template: `    ...  `,  host: {    '(click)': 'focusActiveOption()',  },})export class CustomListbox extends ListboxBase {  @Input() disabled = 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();    /* ... */  }}