Angular指令可以通过实现OnChanges
、OnInit
、DoCheck
、AfterContentInit
、AfterContentChecked
、AfterViewInit
、AfterViewChecked
和OnDestroy
等生命周期钩子接口来监听宿主组件的生命周期。下面是一个示例代码:
import { Directive, OnDestroy } from '@angular/core';
@Directive({
selector: '[customDirective]'
})
export class CustomDirective implements OnDestroy {
constructor() {
console.log('Directive constructor');
}
ngOnChanges() {
console.log('Directive ngOnChanges');
}
ngOnInit() {
console.log('Directive ngOnInit');
}
ngDoCheck() {
console.log('Directive ngDoCheck');
}
ngAfterContentInit() {
console.log('Directive ngAfterContentInit');
}
ngAfterContentChecked() {
console.log('Directive ngAfterContentChecked');
}
ngAfterViewInit() {
console.log('Directive ngAfterViewInit');
}
ngAfterViewChecked() {
console.log('Directive ngAfterViewChecked');
}
ngOnDestroy() {
console.log('Directive ngOnDestroy');
}
}
你可以将此指令应用到宿主组件的模板中,然后观察控制台输出来验证指令是否能够监听宿主组件的生命周期钩子函数。