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

Angular2 --在DOM完全加载后,ngAfterViewChecked会调用多个times..How来调用一个方法吗?

在Angular2中,ngAfterViewChecked是一个生命周期钩子函数,它会在组件视图的变更检测周期中被调用多次。如果想要在ngAfterViewChecked中调用一个方法,可以通过以下方式实现:

  1. 在组件类中定义一个方法,例如myMethod()
  2. 在ngAfterViewChecked中调用myMethod()方法。
代码语言:typescript
复制
ngAfterViewChecked() {
  this.myMethod();
}

这样,每次ngAfterViewChecked被调用时,都会执行myMethod()方法。

需要注意的是,ngAfterViewChecked会在每次变更检测周期中被调用多次,因此在调用方法时要确保不会引起性能问题或产生意外的副作用。

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

相关·内容

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

ngAfterViewInit:Angular创建组件的视图ngAfterViewCheckedAngular检查组件视图的绑定之后。 2. ...延迟加载使我们只加载用户正在交互的模块,而其余的模块会在运行时按需加载。 延迟加载通过将代码拆分成多个包并以按需加载的方式,加速应用程序初始加载过程。...从堆栈溢出就是一个区别:  当异步操作完成或失败时,Promise处理一个单个事件。 Observable类似于(许多语言中的)Stream,当每个事件调用回调函数时,允许传递零个或多个事件。...其中,反应最为迅速的就是Wijmo,Wijmo Angular2 发布几个小时就发布了支持 Angular2 正式版本的 Wijmo。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

17.3K80

angular基础面试题_java web面试题

}) Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令... ngOnInit() 之前以及所绑定的一个多个输入属性的值发生变化时都会调用 ngOnInit: Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。...,ngDoCheck之后 ngAfterContentChecked:每当 Angular 检查完被投影到组件或指令中的内容之后调用,ngAfter...之后调用 ngAfterViewInit:当...ng..之后,只调用一次 ngAfterViewChecked:每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用, gAfterViewInit...灵活的路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 Angular 2应用中,我们应该注意哪些安全威胁?

13K50
  • 浅谈Hooks&&生命周期(2019-03-12)

    ngOnInit()一个多个数据绑定输入属性发生更改 之前和之后调用。 ngOnInit() Angular首次显示数据绑定属性并设置指令/组件的输入属性初始化指令/组件。...ngAfterViewChecked() Angular检查组件的视图和子视图/指令所在的视图响应。...React 是完全根据 useState 的调用顺序“记住”状态归属的,假设组件代码如下: const Counter = () => { const [count, setCount] = useState...useEffect Hook是这三种生命周期方法的组合。 useEffect当组件第一次完成加载时运行一次,然后每次更新组件状态时运行一次。... Counter 组件,如果我们想要在用户点击“+”或者“-”按钮之后把计数值体现在网页标题上,这就是一个修改 DOM 的副作用操作,所以必须把 Counter 写成 class,而且添加下面的代码:

    3.2K40

    AngularJS2.0 教程系列(一)

    Angular2是面向未来的科技,要求浏览器支持ES6+,我们现在要尝试的话,需要加一些 垫片抹平当前浏览器与ES6的差异: systemjs - 通用模块加载器,支持AMD、CommonJS、ES6...等各种格式的JS模块加载 es6-module-loader - ES6模块加载器,systemjs自动加载这个模块 traceur - ES6转码器,将ES6代码转换为当前浏览器支持的ES5...systemjs自动加载 这个模块。 初识Angular2一个Angular2的Hello World应用相当简单,分三步走: 1....看起来像其他语言(比如python) 的装饰器,是这样? ES6规范里没有装饰器。这其实利用了traceur的一个实验特性:注解。...以组件为核心 Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立DOM之上的。

    2.4K10

    实战 | Change Detection And Batch Update

    React Virtual DOM React更新UI的时候根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象,然后根据特定的diff算法比较这两个对象,找出不同的部分...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用方法中连续setState走的是批量更新,此外走的是连续更新。...到此我们可以得出这样一个结论: React调用方法中连续setState走的是批量更新,此外走的是连续更新 说到这里,有些人可能会有这样一个疑惑: setTimeout也是handleClick...综上,说setState是异步的需要加一个前提条件,React调用方法中执行,这时我们需要通过回调获取到最新的state 相信这个道理大家不难理解,因为事件和生命周期方法都是React调用的,它想怎么玩就怎么玩...看个例子: 执行这段代码,打开控制台会发现打印如下 事务最主要的功能就是可以Wrapper一个函数,通过perform调用执行这个函数之前调用initialize方法,等这个函数执行结束了调用

    3.2K20

    Vuejs和其他前端框架的对比

    当有变化产生时,一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别应用在真实的DOM上。...Vue宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。...比如,它的组件系统缺少完备的生命周期事件方法,尽管这些现在是非常常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。 如果你有兴趣研究,你还会发现二者接口设计的理念上是不同的。...例如, Polymer 中唯一支持的表达式只有布尔值否定和单一的方法调用,它的 computed 方法的实现也并不是很灵活。...如果状况不佳,你必须用 Vulcanizer 工具打包 Polymer 元素。而在这方面,Vue 可以结合异步组件的特性和 Webpack 的代码分割特性实现懒加载 (lazy-loaded)。

    3.8K110

    vue.js与其他前端框架的对比

    当有变化产生时,一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别应用在真实的DOM上。...Vue宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。...比如,它的组件系统缺少完备的生命周期事件方法,尽管这些现在是非常常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。 如果你有兴趣研究,你还会发现二者接口设计的理念上是不同的。...例如, Polymer 中唯一支持的表达式只有布尔值否定和单一的方法调用,它的 computed 方法的实现也并不是很灵活。...如果状况不佳,你必须用 Vulcanizer 工具打包 Polymer 元素。而在这方面,Vue 可以结合异步组件的特性和 Webpack 的代码分割特性实现懒加载 (lazy-loaded)。

    4.2K80

    Change Detection And Batch Update

    React更新UI的时候根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象,然后根据特定的diff算法比较这两个对象,找出不同的部分,最后根据改变的那部分进行对应...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用方法中连续setState走的是批量更新,此外走的是连续更新。...到此我们可以得出这样一个结论: React调用方法中连续setState走的是批量更新,此外走的是连续更新 说到这里,有些人可能会有这样一个疑惑 handleClick() { setTimeout...,通过perform调用执行这个函数之前调用initialize方法,等这个函数执行结束了调用close方法。...Vue模板中每个指令/数据绑定都有一个对应的watcher对象,当数据变化时,触发watcher重新计算并更新相应的DOM

    3.3K40

    Change Detection And Batch Update

    React更新UI的时候根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象,然后根据特定的diff算法比较这两个对象,找出不同的部分,最后根据改变的那部分进行对应...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用方法中连续setState走的是批量更新,此外走的是连续更新。...到此我们可以得出这样一个结论: React调用方法中连续setState走的是批量更新,此外走的是连续更新 说到这里,有些人可能会有这样一个疑惑 handleClick() { setTimeout...,通过perform调用执行这个函数之前调用initialize方法,等这个函数执行结束了调用close方法。...Vue模板中每个指令/数据绑定都有一个对应的watcher对象,当数据变化时,触发watcher重新计算并更新相应的DOM

    3.7K70

    Angular2 VS Angular4 深度对比:特性、性能

    Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。...这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台的应用程序,解决了移动应用程序(功能,加载时间等)的挑战后,Angular2可以更容易的处理桌面组件。...通过DI库中提供基本信息(可以调用函数或创建类的实例检查相关元数据),从而简化了对象实例的构建。通过提供注入注释,使得参数信息重写也变得简单。...由于代码依赖于ES6模块,因此模块加载程序将通过部分组件上引用它们,加载依赖关系。...该模板的实例化以及插入到DOM过程可以完全由指令创建者控制。例如ng-repeat和ng-if。

    8.7K20

    angular5面试题_大数据面试题

    Angular双向绑定效率问题 对于页面中需要绑定DOM元素极其多的情况(成百上千),必然遇到效率问题。(具体还取决于PC、浏览器性能)。另外,脏检查超过10次(经验值?)...-- 3.绑定方法调用的结果 --> 直接绑定: 大多数情况下,这都是性能最好的方式。 绑定方法调用的结果:每个脏值检测过程中,classes方程都要被调用一遍。...每个Angular应用程序只能有一个根模块(Root Module),而它可以有一个多个功能模块(Feature Module)。...Module 延迟加载(Lazy-loading) 当一个项目做得很大,为了提高首屏加载速度,可以通过Lazy-loading,当访问到某些具体的url时,才加载那些不常用的feature module...同时,一个元素或组件,可以应用多个指令。

    4.3K20

    ionic3应该善用组件和指令

    angular4提供了很多功能强大的内置指令,但在现实情况中,这些内置指令可能还不能完全满足实际要求,这时我们就需要编写自定义指令实现特定要求。...往往很多人封装组件,但不会去封装指令,而选择用Provider或者Pipe(管道,相当于angular1时的过滤器filter),甚至样式实现,虽说这也能解决部分问题,但不是最优的,Directive...结构指令 结构指令,用于修改DOM结构。其实就是模版指令,如ngIf,当条件为true时,该元素会被添加到DOM中。其主要依赖TemplateRef和ViewContainerRef完成操作。...ElementRef使用,有兴趣的可以自行了解下Renderer 3)使用指令 如果调用的页面用了懒加载调用指令的页面module.ts里导入指令并声明,反之,app.module.ts里导入指令并声明...里引入html如下调用即可: 总结:可以看出来,自定义指令和组件不算复杂

    3.5K40

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

    ngOnChanges() ngOnInit() 重点 ngDoCheck() ngAfterContentInit() ngAfterContentChecked() ngAfterViewInit() ngAfterViewChecked...如果组件绑定过输入属性,那么 ngOnInit() 之前以及所绑定的一个多个输入属性的值发生变化时都会调用。...ngOnInit() 重点 组件初始化完毕等同于Vue.js的mounted 第一轮 ngOnChanges() 完成之后调用,只调用一次。...注意:紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 调用。 注意:基本用不上。...ngAfterViewChecked() 组件的视图发生改变需要检查 ngOnDestroy() 重点 组件即将被从DOM树上卸载时 每当 Angular 每次销毁指令/组件之前调用并清扫。

    94220

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

    开发人员可以通过Angular core库中实现一个多个Lifecycle Hook界面挖掘该生命周期中的关键时刻。 每个接口都有一个单一的钩子方法,其名称是以ng开头的接口名称。...例如,OnInit接口有一个名为ngOnInit的钩子方法,Angular创建组件立即调用: lib/src/peek_a_boo_component.dart (ngOnInit) class PeekABoo...该方法接收当前和前一个属性值的SimpleChanges对象。 ngOnInit之前调用并且每当有一个多个数据绑定输入属性发生变化时调用。...添加一个英雄产生一个新的英雄。 间谍的ngOnInit记录该事件。 重置按钮清除英雄列表。 Angular从DOM中移除所有英雄元素并同时销毁他们的间谍指令。...您可以期待Angular创建组件立即调用ngOnInit方法。 这就是深度初始化逻辑所属的地方。

    6.2K10

    angular面试题及答案_angular面试

    ngOninit:初始化指令或组件,angular第一次显示展示组件的绑定属性调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...:angular初始化组件及其子组件的视图之后调用,只调用一次,只适用于组件 ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用,只适用于组件 ngOnDestroy:...module声明了哪些模块可以被其他模块使用,依赖注入了哪些类,以及启动的component,模块管理组件,使app实现模块化。 21. 怎样组件中选择一个元素?...组件的constructor中引入 ElementRef 操作DOM元素 constructor(myElement: ElementRef) { ... } 22....当没有配置base标签时,加载应用失败。 23.

    11.1K120

    进阶 | 重新认识Angular

    , 因为它完全的依照AST生成,而不是Dom上的改写。...首先我们使用一个内建DSL解析模板字符串并输出AST。 结合特定的数据模型(regularjs中,是一个裸数据), 模板引擎层级游历AST并递归生成Dom节点(不会涉及到innerHTML)。...你必然通过innerHTML获得初始Dom结构....由于应用包含了Angular编译器以及大量实际上并不需要的库代码,所以文件体积也更大。更大的应用需要更长的时间进行传输,加载也更慢。...与其进行口水之争,取精辟,去糟粕,不更是面向未来的方式? 参考 《Angular的变革》 《Angular2 脏检查过程》 《预 (AoT) 编译器》 扫码下方二维码, 随时关注更多前端干货文章!

    2.6K10

    前端三大框架vue,angular,react大杂烩

    以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。如果有一个牛逼的前端,后端差不多只需要增删改查的基本业务就能完全搞定一个web应用。...,例如,js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象发现他们是否改变,如果改变就会调用相应的处理方法实现双向绑定   ...AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)设置数据绑定。因此, NG框架是DOM加载完成之后, 才开始起作用的。...可以配合类似于Require.js实现异步加载,懒加载(按需加载)则是借助于 ocLazyLoad 方式的解决方案,但是理想情况下应该是本地框架更易懂。   ...Angular2使用ES6的module定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。

    3K90

    前端三大框架vue,angular,react大杂烩

    以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。如果有一个牛逼的前端,后端差不多只需要增删改查的基本业务就能完全搞定一个web应用。...,例如,js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象发现他们是否改变,如果改变就会调用相应的处理方法实现双向绑定   ...AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)设置数据绑定。因此, NG框架是DOM加载完成之后, 才开始起作用的。...可以配合类似于Require.js实现异步加载,懒加载(按需加载)则是借助于 ocLazyLoad 方式的解决方案,但是理想情况下应该是本地框架更易懂。   ...Angular2使用ES6的module定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。

    2.1K60

    前端三大框架大杂烩

    以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。如果有一个牛逼的前端,后端差不多只需要增删改查的基本业务就能完全搞定一个web应用。...,如果改变就会调用相应的处理方法实现双向绑定   Vue 也支持双向绑定,默认为单向绑定,数据从父组件单向传给子组件。...AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)设置数据绑定。因此, NG框架是DOM加载完成之后, 才开始起作用的。...可以配合类似于Require.js实现异步加载,懒加载(按需加载)则是借助于 ocLazyLoad 方式的解决方案,但是理想情况下应该是本地框架更易懂。   ...Angular2使用ES6的module定义模块,也考虑了动态加载的需求。 Vue   Vue中指令和组件分得更清晰。

    2.6K50
    领券