关于 Angular Component ngOnDestroy 钩子函数的调用时机

简介: 关于 Angular Component ngOnDestroy 钩子函数的调用时机

我开发了一个 Angular Component,实现了 ngOnDestroy 钩子方法之后,没有找到其被调用的方法。查看这个StackOverflow链接后,得知无论是我刷新浏览器,还是从当前页面路由到一个新的页面,都不会触发 ngOnDestroy.


On refresh or when you navigate away from the current page, then ngOnDestroy won’t be called. The application will just be destroyed by the browser.


Only when Angular2 removes the component from the DOM because you move away or you call destroy() on a dynamically created component, then ngOnDestroy() is called.


只有当 Component 从 DOM 中被移除,或者显式调用一个动态创建的 Component 实例的 destroy 方法,才能触发 ngOnDestroy.

image.png


我点击 navigate to 跳转之前,DOM 元素如下图所示:


image.pngimage.png


点了跳转后,browser-test 元素确实从 DOM 中消失了:


image.pngimage.png


然而我在该 DOM 节点上设置的 Break on node removal 并没有触发,感觉这个跳转像是一次页面刷新:


image.pngimage.png

相关文章
|
2月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
|
2月前
|
编译器 API 开发者
Angular Component ɵcmp 属性的含义和使用场合介绍
Angular Component ɵcmp 属性的含义和使用场合介绍
|
2月前
|
API 开发者
Angular Component class ɵfac 的属性介绍
Angular Component class ɵfac 的属性介绍
|
9月前
|
JavaScript 数据安全/隐私保护 开发者
Angular Component Class 成员属性默认的访问权限控制
Angular Component Class 成员属性默认的访问权限控制
|
10月前
|
JavaScript Shell
使用 RxJs 实现一个支持 infinite scroll 的 Angular Component
使用 RxJs 实现一个支持 infinite scroll 的 Angular Component
|
2月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
2月前
|
JavaScript
Angular Component 内 set 关键字的使用
Angular Component 内 set 关键字的使用
|
8月前
|
前端开发 JavaScript 测试技术
什么是 Angular 的 Custom component
什么是 Angular 的 Custom component
|
9月前
|
测试技术 API 开发者
关于 Angular Component ChangeDetectionStrategy.OnPush 策略
关于 Angular Component ChangeDetectionStrategy.OnPush 策略
|
9月前
|
JavaScript
关于 Angular 应用里 Component 继承和 Override 的一个实际例子
关于 Angular 应用里 Component 继承和 Override 的一个实际例子