angular 脏值检测基础流程

本文探讨Angular脏值检测的基础流程,从根节点检查到当前页面节点,详细讲解了更新DOM后的双次检测。通过一个具体的demo,展示了如何配置路由、组件结构,并利用textContent进行绑定测试。在core.js中关注checkAndUpdateView函数,可以观察到从根节点到子节点的检查过程。在ngAfterViewChecked和ngAfterViewInit中修改值会导致死循环,应当避免在这些生命周期钩子中改变状态。
摘要由CSDN通过智能技术生成

脏值检测需要我们知道的

1.单项数据流,从根节点检查到当前页面节点

 2.脏值检测时候的声明周期

 更新dom以后 脏值检测需要走两次。下面我们配置一个demo演示。

首先配置我们需要的demo

routing里面路径配置

const routes: Routes = [
  {
    path: 'home',
    component: HomeContainerComponent,
  },
  {
    path: 'change-detection',
    pathMatch: 'full',
    component: ParentComponent
  }
];

我们使用change-detection 路径区做脏值检测

需要两个模块component ----- parents child  先看parent.htm结构

<p>{
  { title }}parent works!</p>
<app-child [title]="'Hello'"></app-child>
<br />
<button (click)="hand
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值