web-dev-qa-db-ja.com

Angular2コンポーネントに複数のライフサイクルフックを実装する方法

Angular2でコンポーネントを定義するとき、OnDestroy、NgOnInitなど、実装可能な複数のタイプのライフサイクルフックがあることを知っています。

これらのフックの使用について私がオンラインで見たコードのすべてのサンプルでは、​​一度に1つずつしか使用されていません。例えば

export class ModalComponent implements OnDestroy { ... }

または

export class ModalComponent implements OnChanges { ... }

しかし、単一のコンポーネントに複数を使用する場合はどうでしょうか？たとえば、OnChanges AND OnDestroyに特定の動作が必要な場合はどうなりますか？私は次を試しました：

export class ModalComponent implements OnChanges implements OnDestroy{ ... } 
export class ModalComponent implements OnChanges, OnDestroy { ... } 
export class ModalComponent implements [OnChanges, OnDestroy] { ... } 
export class ModalComponent implements OnChanges and OnDestroy { ... }

答えは非常に簡単ですが、これに対する答えを見つけるのにかなりの苦労をしています。

前もって感謝します！

angularlifecycle-hook
19
SemperCallide

1つのクラスを拡張し、複数のインターフェイスを実装できます。ライフサイクルフックはインターフェースです。

class D extends C implements A, B{}
31
A. Tim

コンマ区切りで2つのインターフェイスを実装したとき、おそらく正しかったでしょう。

以下に例を示します。

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';


@Component({
  selector: 'app-ram-component',
  templateUrl: './ram.component.html',
  styleUrls: ['./ram.component.css']
})

export class RamComponentComponent implements OnInit,OnDestroy,AfterViewInit { 

  constructor() { }

  ngOnInit() {
    console.log('On Init');
  }
  ngAfterViewInit(){
    console.log('after view');
  }
  ngOnDestroy(){
    console.log('destroyed!!');
  }
}

Importステートメントには、必要なライフサイクルフックをすべて含める必要があることに注意してください。

 import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';

ライフサイクルフックリファレンス

6
Ram Kishore K