对ngAfterViewInit的理解

最新推荐文章于 2024-04-14 20:36:47 发布
最新推荐文章于 2024-04-14 20:36:47 发布
阅读量8.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songjinb123/article/details/79239631
版权

最近在模仿一个项目，但是一开头就出了些问题，在index.html中，我写了一个加载

<body class="fix-header card-no-border fix-sidebar">
<!--<body>-->
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->

<div class="preloader">
  <div class="loader">
    <div class="loader__figure"></div>
    <p class="loader__label">加载中 ...</p>
  </div>
</div>
  <app-root></app-root>
</body>
然后我在app-routing.module.ts中懒加载了login模块 

const routes: Routes = [
  {path: 'login', loadChildren: './login/login.module#LoginModule'},
  // {path: 'pages', loadChildren: './pages/pages.module#PagesModule'},
  {path: '', redirectTo: 'login', pathMatch: 'full'}
  // {path: '', redirectTo: 'login', pathMatch: 'full'}
];
但是，我的页面就是不显示login，我找啊找啊。。。最后只能找老大了，老大上来一顿啪啪啪。。。打完收工。。。原来是在logincomponent加了了ngAfterViewInit方法 

ngAfterViewInit(): void {
  // $('.preloader').hide();
  const $__loader = $('.preloader');
  $(function () {
    $__loader.fadeOut();
  });
}
我又回头看了下生命周期钩子，有点顿开的感觉，但又说不上来

songjinb123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别
weixin_30679823的博客
12-03 9070
angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks文档中做了介绍。 ngOnInit()在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件； ngAfterViewInit()初始化完组件视图及其子视图之后调用。 ngOnInit() 钩子应该是我们用得最频繁的一个了，在使用命...
angular学习(@Injectable() +AfterViewInit+ElementRef+ViewChild+Renderer)
kikyou_csdn的博客
08-22 1399
一、@Injectable() 如果所创建的服务不依赖于其他对象，是可以不用使用 Injectable 类装饰器。但当该服务需要在构造函数中注入依赖对象，就需要使用 Injectable 装饰器。不过比较推荐的做法不管是否有依赖对象，在创建服务时都使用 Injectable 类装饰器。 例如，app.component.ts中引用服务Loading.ts： app.compon...
ngAfterViewInit( ) to early /// ngFor和异步网络请求导致无法选中目标元素的问题
dongnihao的博客
07-18 798
我使用ngfor来循环出 网络请求的来的数据，但是这个请求是一个 Observable，当我在ngAfterInit中去获取的时候，尚未走到下一个事件循环中（这个事件循环就是网络请求后的赋值），此时查询到dom为null，那么当下一个事件循环后，dom被渲染且赋值，并且同步到html内。这时我对ngAfterInit（）中的 querySelecter（）方法套上一层 setTimeOut（），是最后执行的事件循环。
Android 使用Google Map API；云计算概念IaaS，PaaS，SaaS，CaaS，MaaS
最新发布
2401_84149694的博客
04-14 835
找到一套好的视频资料，紧跟大牛梳理好的知识框架进行学习。多练。（视频优势是互动感强，容易集中注意力）你不需要是天才，也不需要具备强悍的天赋，只要做到这两点，短期内成功的概率是非常高的。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。
ElementRef、Renderer2、viewChild、AfterViewInit
Jesus的博客
08-31 1461
1.https://segmentfault.com/a/1190000008653690;
Angular学习笔记之--（1）生命周期篇
qq_42186457的博客
08-23 792
首先来一张官网上的图，转于https://angular.cn/guide/lifecycle-hooks /** * 执行顺序： * constructor：组件构造函数调用 * ngOnChanges：组件输入属性 `@Input改变` 多次触发 * ngOnInit：组件初始化 * ngDoCheck: 框架层面做的变化检测 与ngOnChanges有重叠的地方，双方一般不同时出现 多次触发 * ngAfterContentInit：组件内容初始化 ...
浅谈对Angular中的生命周期钩子的理解
08-29
Angular中的生命周期钩子是开发过程中不可或缺的一部分，它们允许开发者在组件的不同阶段进行特定的操作，确保组件的正确初始化、数据更新...因此，对Angular生命周期钩子的深入理解是每个Angular开发者必备的知识点。
AngularJS_Directives:编写自己的自定义指令的基本课程
06-30
3. **生命周期钩子**：AngularJS指令有多个生命周期钩子函数，如`ngOnInit()`, `ngOnChanges()`, `ngDoCheck()`, `ngAfterViewInit()`, `ngOnDestroy()`等，这些函数在指令的不同阶段被调用，允许开发者在特定时刻...
lyricJS:用于编写音乐歌词的节点和 Angular 自然语言处理
05-31
- **语义分析**：虽然不是直接功能，但可以通过扩展实现对歌词含义的深度理解，如通过情感分析确定歌曲的基调。 ### 5. 扩展与应用 lyricJS 不仅限于基本的歌词展示，还可以与其他技术结合，如： - **AI 生成歌词...
Angular请求防抖处理第一次请求失效问题
10-16
通过在`ngAfterViewInit`中调用`searchText$.next(this.queryName)`，并在`ngOnInit`中订阅`packages$`，可以确保在组件初始化时正确地发送第一次请求，之后的输入也会按预期工作。 总结来说，理解Angular中的RxJS...
Angular中的生命周期函数--动态挂载销毁组件
03-06
- `ngAfterContentInit()`: 在内容投影完成后调用，如果组件有内容投影，可以在此处对它们进行操作。 - `ngAfterContentChecked()`: 每次内容变化后调用，用于在内容变化后进行额外处理。 - `ngAfterViewInit()`: 当...
angular-文章
weixin_40810307的博客
03-11 239
ngif 判断值是否应该存在，若不存在，直接在DOM树中删除，若存在，再在DOM数中添加上去*ngfor 代表着循环，跟Vue中的v-for相同，只是，写法上不一样*作用，属于语法糖的一种，*ngIf相当于下列语法1。
angular中的生命周期钩子都有哪些， 都是怎么用的？
weixin_53363875的博客
05-09 560
angular中的生命周期钩子都有哪些， 都是怎么用的？
Angular入门笔记一
qq_45787731的博客
05-18 979
基础 官网连接（中文）： https://angular.cn/start 简介：angular是由Google维护的一款开源javaScript。Anguar1.5叫做angularJs，Angular4.0称为Angular，Angular1.5到Angular4.0是完全重写。（我们要学的是Angular） 安装、创建及运行： 要求node大于10.9，查看node版本： node -v 安装angular命令：npm install -g @angular/cli 查看安装的版本命令：ng vers
angular
weixin_45678402的博客
02-23 705
angular
Angular 变化检测详解
柚橙论
12-27 2350
简单的来说，变化检测就是通过检测视图与状态之间的变化，在状态发生了变化后，帮助我们更新视图，这种将视图和我们的数据同步的机制就叫变化检测。
angular企业开发笔记
weixin_49526860的博客
12-09 1360
Angular 企业开发笔记
Angular终极教程
材女的进击
02-20 6198
Angular的教程,清楚明了，卷起来吧
AfterViewInit和AfterViewChecked钩子的实现和注意事项
weixin_45003344的博客
10-08 3414
AfterViewInit和AfterViewChecked这两个钩子是在组件模板所有的内容都被组装完成以后，组件的模板已经呈现给用户看了，这个动作完成以后，这两个方法才会被调用。 AfterViewInit方法会被先调用，AfterViewChecked方法会被后调用 注意点一 只有子组件视图的初始化和变更检测完毕后，父组件视图才开始初始化和变更检测，这也说明想要父组件视图想要完全组装好，...
ngafterviewinit
06-13
`ngAfterViewInit` 是Angular生命周期钩子之一，它在组件的视图和子视图初始化完成后被调用。在这个钩子函数中，你可以执行一些需要在视图初始化完成后才能进行的操作，比如获取DOM元素的引用、调用第三方库的初始化方法等。需要注意的是，如果你在组件中使用了`@ViewChild` 或`@ViewChildren` 装饰器来获取子组件或DOM元素的引用，那么这些引用只有在`ngAfterViewInit`之后才会被赋值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值