継承

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