我知道在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 { ... }
我确定答案非常简单,但我在寻找答案方面遇到了很多麻烦。
提前谢谢!
答案 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';