如何为Angular2组件实现多个生命周期钩子?

时间:2017-01-10 22:39:35

标签: angular lifecycle-hook

我知道在Angular2中定义组件时,您可以实现多种类型的生命周期钩子,例如OnDestroy,NgOnInit等。

在我在网上看到有关使用这些钩子的每个代码示例中,我只看到它们一次被使用一个。例如

export class ModalComponent implements OnDestroy { ... }

export class ModalComponent implements OnChanges { ... } 

但是如果你想为一个组件使用多个怎么办?例如,如果您想要OnChanges和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 { ... } 

我确定答案非常简单,但我在寻找答案方面遇到了很多麻烦。

提前谢谢!

2 个答案:

答案 0 :(得分:28)

您可以扩展1个类并实现多个接口。生命周期钩子是接口。

class D extends C implements A, B{}

答案 1 :(得分:5)

当您使用逗号分隔符实现两个接口时,您可能是对的。

以下是一个例子。

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';

Lifecycle Hooks Reference