Angular 8 组件的生命周期-AfterView

本文详细讲解了Angular 8中AfterViewInit和AfterViewChecked钩子的作用,尤其是在处理子组件视图变化时的响应策略,以及通过实例演示如何在确保单向数据流的同时触发重新渲染。学习如何在Angular应用中安全地进行视图更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Angular 8 组件的生命周期-AfterView

1.响应视图的变更

  1. 当 Angular 在变更检测期间遍历视图树时,需要确保子组件中的某个变更不会尝试更改其父组件中的属性。因为单向数据流的工作原理就是这样的,这样的更改将无法正常渲染。
  2. 如果你需要做一个与预期数据流反方向的修改,就必须触发一个新的变更检测周期,以允许渲染这种变更。这些例子说明了如何安全地做出这些改变。
  3. AfterView 例子展示了 AfterViewInit() 和 AfterViewChecked() 钩子,Angular 会在每次创建了组件的子视图后调用它们。
    father.componet.html
<app-after-view-parent></app-after-view-parent>

after-view-parent.compoent.html

<div>
  <app-after-view *ngIf="show"></app-after-view>

  <div>
    <h2>AfterView Logs</h2>
    <button pButton type="button" (click)="reset()">Reset</button>
  </div>
</div>

after-view-parent.compoent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-after-view-parent',
  templateUrl: './after-view-parent.component.html',
  styleUrls: ['./after-view-parent.component.css']
})
export class AfterViewParentComponent implements OnInit {
  public show:boolean =  true;
  constructor() { }

  ngOnInit() {
    // console.log(`after view parent ngOnInit!`);
  }

  reset() {
    this.show = false;
  }

}

after-view.compoent.html

<div>
  <div>child view begins</div>
  <app-child-view></app-child-view>
  <div>child view ends</div>
  <p *ngIf="comment">{{comment}}</p>
</div>

after-view.compoent.ts

import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { ChildViewComponent } from '../child-view/child-view.component';

@Component({
  selector: 'app-after-view',
  templateUrl: './after-view.component.html',
  styleUrls: ['./after-view.component.css']
})
export class AfterViewComponent implements OnInit, AfterViewInit, AfterViewChecked {
  public comment:string = '';
  public pervHero: string = '';
  @ViewChild(ChildViewComponent) viewChild!:ChildViewComponent;
  constructor(private cd: ChangeDetectorRef) { }

  ngOnInit() {
    // console.log(`after viwe ngOnInit!`);
  }
  ngAfterViewInit() {
    console.log(`after viwe ngAfterViewInit`);
    this.doSomething();
  }
  ngAfterViewChecked() {
    if(this.pervHero === this.viewChild.hero) {
      console.log(`AfterViewChecked (no change)`)
    } else {
      this.pervHero = this.viewChild.hero;
      console.log(`AfterViewChecked`);
      this.doSomething();
    }
  }
  doSomething() {
    const c = this.viewChild.hero.length > 10?`That's a long name`: '';
    if(this.viewChild.hero.length > 10) {
      this.comment = c;
      //手动脏值检查
      this.cd.detectChanges();
    }
    
  }

}

child-view.component.html

<div>
  <label>Hero Name:</label>
  <input type="text" [(ngModel)]="hero"/>
</div>

child-view.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-child-view',
  templateUrl: './child-view.component.html',
  styleUrls: ['./child-view.component.css']
})
export class ChildViewComponent implements OnInit {
  public hero:string = 'Magneta';
  constructor() { }

  ngOnInit() {
    // console.log(`child view ngOnInit!`);
  }

}

运行效果:
在这里插入图片描述

2.学习地址:

Angular官网

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值