首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在页面之间导航时不会调用ngAfterViewInit

ngAfterViewInit是Angular生命周期钩子函数之一,它在组件的视图初始化完成后被调用。它通常用于处理与视图相关的初始化操作,例如获取DOM元素的引用或执行一些需要在视图渲染完成后才能进行的操作。

在页面之间导航时,Angular会销毁当前页面的组件,并创建新页面的组件。因此,ngAfterViewInit不会被调用,因为新页面的组件的视图还没有初始化完成。

页面之间的导航通常是通过路由实现的。当导航到一个新页面时,Angular会触发路由导航事件,并加载新页面的组件。在这个过程中,Angular会依次调用新页面组件的生命周期钩子函数,包括ngOnInit、ngOnChanges等,但不会调用ngAfterViewInit。

如果需要在页面导航后执行一些操作,可以考虑使用路由导航事件的回调函数或订阅路由事件的方式来实现。例如,在路由导航事件中可以执行一些需要在页面导航后立即进行的操作,如数据加载、状态更新等。

需要注意的是,以上回答是基于Angular框架的理解,如果使用其他前端框架或技术,可能会有不同的实现方式和生命周期钩子函数。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-生命周期钩子 顶

生命周期序列 通过调用其构造函数创建组件/指令后,Angular特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性响应。...ngAfterContentInit和后续的每次NgDoCheck之后调用。 组件独有的钩子。 ngAfterViewInit Angular初始化组件的视图和子视图之后进行响应,。...ngAfterViewInit和后续的每次ngAfterContentChecked之后调用。 组件独有的钩子。 ngOnDestroy Angular摧毁指令/组件之前进行清理。...例如,路由器也有自己的路由器生命周期挂钩,可以让我们利用路由导航中的特定时刻。 可以ngOnInit和routerOnActivate之间绘制一个平行线。...大部分初始检查都是由Angular页面其他地方首次渲染(与数据无关)而触发的。 仅仅通过鼠标移动到另一个输入框就会触发一个呼叫。 相对较少的调用显示相关数据的实际变化。

6.2K10

Angular ViewChild和ViewChildren

视图查询 ngAfterViewInit 钩子函数调用前完成,因此 ngAfterViewInit 钩子函数中,就能正常获取查询的元素。...以上代码成功运行后,页面能够看到期望的结果。...但如果我们 ngAfterViewInit 生命周期钩子中重新设置天数,那么控制台将会抛出以下异常: ERROR Error: ExpressionChangedAfterItHasBeenChecked...nativeElement 属性,你会发现该属性对应的值是原生的 DOM 元素,因此我们可以 ngAfterViewInit 生命周期钩子中执行某些 DOM 操作: ngAfterViewInit(...但在实际项目中,我们是不推荐直接使用 DOM API 执行 DOM 操作的,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。

2.7K20
  • Angular ElementRef 简介

    下面我们就来分析一下 ElementRef 类: ElementRef 的作用 应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如 web worker 中...,获取页面中的 div 元素,并改变该 div 元素的背景颜色。...浏览器中 native 元素就是 DOM 元素,我们只要先获取 my-app元素,然后利用 querySelector API 就能获取页面中 div 元素。...没有抛出异常,我们可以推断 this.elementRef.nativeElement 这个对象是存在,但却找不到它的子元素,那应该是调用构造函数的时候,my-app 元素下的子元素还未创建。...我们看到设置 div 元素的背景,我们是默认应用的运行环境是浏览器中。前面已经介绍了,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。

    1.6K60

    Angular核心-组件的生命周期函数钩子函数

    如果组件绑定过输入属性,那么 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。...注意,如果你的组件没有输入属性,或者你使用它没有提供任何输入属性,那么框架就不会调用 ngOnChanges()。...ngOnInit() 重点 组件初始化完毕等同于Vue.js的mounted 第一轮 ngOnChanges() 完成之后调用,只调用一次。...而且即使没有调用过 ngOnChanges(),也仍然会调用 ngOnInit()(比如当模板中没有绑定任何输入属性)。 ngDoCheck() 组件检查到了系统对自己的影响。...ngAfterViewChecked() 组件的视图发生改变需要检查 ngOnDestroy() 重点 组件即将被从DOM树上卸载 每当 Angular 每次销毁指令/组件之前调用并清扫。

    94220

    angular面试题及答案_angular面试

    第一次调用ngDocheck()之后调用,只调用一次,只适用于组件 ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用,只适用于组件 ngAfterViewInit...传统的web技术中,客户端请求一个web页面(HTML/JSP/asp),服务器返回资源(或HTML页面),客户端再次请求另一个页面,服务器用另一个资源响应。...Observables 和Promises的区别 Observables 是惰性的,意思是subsciption之前什么都不会发生。...component控制视图(html).组件之间以及组件和service之间互相交互给app提供功能 module是包括一个或多个组件,module不会控制视图(HTML)。...是输入属性发生变化的时候调用,并且ngOnInit是ngOnchanges执行之后才调用,而constructor是组件实例化的时候就调用了,也就是说,constructor中是取不到输入属性的值的

    11.1K120

    Angular DOM 抽象概述

    autocomplete="off" name="q" tabindex="-1" type="url" jsaction="mousedown:ntp.fkbxclk" style="opacity: 0;"> 页面完成渲染后...作用 应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如 Web Worker 中,因为 Web Worker 环境中,是不能操作 DOM。...模板元素是一种机制,允许包含加载页面不渲染,但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储页面上稍后使用的一小段内容。...动态创建组件的流程如下: 获取装载动态组件的容器 组件类的构造函数中,注入 ComponentFactoryResolver 对象 调用 ComponentFactoryResolver 对象的 resolveComponentFactory...entryComponents - 用于指定在模块定义,需要编译的组件列表。

    3.5K30

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    ngOnInit() Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。...ngAfterContentInit() 和每次 ngDoCheck() 之后调用 ngAfterViewInit() 当 Angular 初始化完组件视图及其子视图之后调用。...ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。 ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。... Angular 销毁指令/组件之前调用。...修改项目默认调转页面,Angular应用多模块路由配置: 找到app-routing.module.ts文件,【routes】对象中声明新模块路由,以及项目默认调转页面地址修改。 ?

    4K20

    angular页面打印局部功能实现方法思考

    场景 页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题,菜单等其他元素。...后天api请求都需要带上token信息 前台页面跳转到打印页面后再跳回 1、通过缓存传递数据, 2、路由跳转到打印页面, 3、页面获取缓存数据, 4、调用浏览器打印方法, 5、操作完毕页面后退一步...]); // 路由跳转,缓存key值传递过去 打印页面 ngAfterViewInit() { const $qus = this.route.params.subscribe(q => {...2、不需要token信息的情况下,并且支持get请求的,可以浏览器中直接打开该地址。或者通过a标签来实现下载和页面显示。并实现打印功能。...效果 iframe页面调用打印 这个方法可以结合前两个方法使用,把前两个页面放在在iframe页面里。 略。

    1.7K20

    Angular快速学习笔记(3) -- 组件与模板

    下面介绍其中的两个:管道和安全导航操作符 管道操作符 ( | ) 绑定之前,表达式的结果可能需要一些转换。例如,可能希望把数字显示成金额、强制文本变成大写,或者过滤列表以及进行排序。...name}} 与安全导航操作符不同的是,非空断言操作符不会防止出现 null 或 undefined。...ngAfterContentInit() 和每次 ngDoCheck() 之后调用 ngAfterViewInit() 初始化完组件视图及其子视图之后调用。...ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。 ngOnDestroy() 当 Angular 每次销毁指令/组件之前调用并清扫。...本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    15.3K30

    Apriso开发葵花宝典之八Portal Session篇

    页面导航 DELMIA Apriso中,页面由一个布局和几个视图组成。视图链接到页面Screen上的布局面板或通过操作作为弹出窗口。...屏幕之间导航、屏幕上的交互以及业务逻辑的运行都是通过Actions完成的。...屏幕之间导航——按钮调用的“转到屏幕”动作 屏幕上的交互——切换选项卡 运行业务逻辑——调用标准操作的按钮 Apriso中一个应用通过一组页面组合形成一个页面流(Screen Flow)堆栈来实现...导航场景(例如back或return)以及调用Screen On Initialize 操作也同样存在不一样。 页面堆栈Screen Stack: 每个门户会话调用一个相关联的Screen堆栈。...屏幕之间导航,可以将屏幕推入堆栈或从堆栈中拉出并呈现给用户。当导航到普通屏幕,屏幕被放置屏幕堆栈中,可以稍后返回。但是,您可以使用导航类型更改屏幕与屏幕堆栈交互的方式。

    18010

    多路由复用页面组件问题

    ,不调用beforeRouteEnter、mounted等,可以监听到$route,并获取到激活组件里面的数据,不会错乱 在场景(2)中,切换页面调用beforeRouteEnter钩子函数,不调用created..., /foo/1 和 /foo/2 之间跳转的时候 动态路由匹配 文档请看这里 响应路由参数的变化 当使用路由参数,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。...不过,这也意味着组件的生命周期钩子不会再被调用。...复用组件,想对路由参数的变化作出响应的话,有两种方法 watch (监测变化) $route 对象 使用 2.2 中引入的 beforeRouteUpdate 导航守卫 使用beforeRouteUpdate...获取到的还是失活页面组件的id beforeRouteUpdate钩子中,next回调函数中编写代码并没有执行,仿佛没有调用,但是去掉next(),路由就不会放行,有点奇怪。

    1K10

    React push与repalce

    push和replace的概述React中,push和replace方法是history对象的两个方法,用于路由之间进行导航。...replace: 替换当前的路由,不会将新的路由添加到历史记录中,用户无法通过返回按钮返回到当前页面。...当用户点击"Go to About (Push)"按钮,会调用handleButtonClick函数,该函数使用push方法将用户导航到"/about"页面。...当用户点击"Go to About (Replace)"按钮,会调用handleButtonReplaceClick函数,该函数使用replace方法将当前路由替换为"/about"页面。...这将替换当前的路由,不会将新的路由添加到历史记录中,用户无法通过返回按钮返回到当前页面。通过这种方式,我们可以根据不同的需求选择使用push或replace方法进行页面导航

    81320

    Angular 从入坑到挖坑 - 组件食用指南

    当需要使用这个组件,直接在页面上添加选择器对应的标签就可以了 ?...="expr">NgIf 结构型指令 当 expr 属性为 true ,这个元素则会显示页面上,当属性值为 false ,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素的...安全导航运算符 视图中使用的属性值为 null or undefined ,javascript 和 angular 会引发空指针异常并中断视图的渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...被绑定的输入属性值发生变化时触发,会调用多次;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...ngAfterContentInit 组件内容渲染完成后调用一次 ngAfterContentChecked 只要组件的内容发生改变就会被调用 ngAfterViewInit 视图加载完成后触发一次,

    15.8K30

    vue项目创建步骤 和 路由router知识点

    路径参数,望文生义意思是参数作为路径的一部分,配置路由的时候把参数配置好,然后浏览器中输入url,必须传参,否则会找不到这个路由这个页面。...然后pageA页面中用:this.$route.params 来获取所有的路径参数。   而查询参数则没有路径参数这么严格,路由不会对此做验证。路由参数url中的表现为页面链接后面加 ?...$route.matched: 里面包含了路由的一些匹配信息 2.3 路由props设置及路径参数获取   设置页面路由,如果增加一个props属性,并设置为true, 则在页面中可以直接拿到参数,...它的特点就是使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变页面不会重新加载。...确保要调用 next 方法,否则钩子就不会被 resolved。

    2K40
    领券