Angular学习笔记（十九）周期钩子之OnDestroy

最新推荐文章于 2025-05-11 17:45:20 发布

BAOBAB_cc

最新推荐文章于 2025-05-11 17:45:20 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Angular学习系列

本文链接：https://blog.youkuaiyun.com/BAOBAB_cc/article/details/79282685

Angular学习系列专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了Angular中OnDestroy生命周期钩子的作用，它在组件销毁前被调用，常用于反订阅流和清除定时器。在路由跳转时，前一个组件会被销毁并触发此钩子。同时，文章探讨了用户行为如何触发检查钩子，以及如何避免性能问题。最后，建议在父子组件交互中避免直接访问，推荐使用输入输出属性进行通讯。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

OnDestory

定义：组件销毁前调用的最后一个钩子

用途：用于反订阅流，消除定时器

常在哪里出现：路由跳转时。当一个路由地址跳往另一个路由地址时，前一个路由地址对应的组件会被销毁，后一个路由对应的组件会被创建。

销毁时会触发：当应用发生变化，所有的check方法都会被调用

demo:

app.component.html

<a [routerLink]="['child']">子组件1</a>
<a [routerLink]="['child2']">子组件2</a>
<router-outlet></router-outlet>

child.component.ts

export class ChildComponent implements OnInit,OnDestroy {

  constructor() { }

  ngOnDestroy():void {
    console.log('child组件销毁完毕');
  }

}

运行图：
这里写图片描述

用户行为触发check钩子

用户行为会触发变更检测机制，一旦检测到发生了变更。当前组件树将会调用，其它未被销毁的组件中所有含有check关键字的钩子。

如果当前变化导致输入属性改变了，那么那个组件的ngOnChanges也会被调用

demo:
app.component.ts

export class AppComponent implements AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked {

  ngOnInit(){
    console.log('ngOnInit')
  }

  ngDoCheck() {
  console.log('ngDoCheck');
  }  
  ngAfterContentInit() :void{
  console.log('ngAfterContentInit');

  }

  ngAfterContentChecked() :void{
  console.log('ngAfterContentChecked');
  }

  ngAfterViewInit() :void{
  console.log('ngAfterViewInit');
  }

  ngAfterViewChecked() :void{
  console.log('ngAfterViewChecked');

  }

}