Angular 8 组件的生命周期-ngOnChanges

本文详细介绍了Angular8中组件的ngOnChanges生命周期钩子,展示了如何监控输入属性的变化。当组件的输入属性值发生变化时,Angular会调用ngOnChanges方法。例子中,`power`属性的变化会被记录,而`hero.name`的更改因为对象引用未变而不被捕捉。文章提供了相关代码示例,包括父组件和子组件的实现,以及如何在子组件中重置变更日志。

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

Angular 8 组件的生命周期-ngOnChanges

1. 使用变更检测钩子

  1. 一旦检测到该组件或指令的输入属性发生了变化,Angular 就会调用它的 ngOnChanges() 方法。 这个 onChanges 范例通过监控 OnChanges() 钩子演示了这一点。
  2. ngOnChanges() 方法获取了一个对象,它把每个发生变化的属性名都映射到了一个SimpleChange对象, 该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代,并记录它们。
  3. 日志条目把 power 属性的变化显示为字符串。但请注意,ngOnChanges() 方法不会捕获对 hero.name 更改。这是因为只有当输入属性的值发生变化时,Angular 才会调用该钩子。在这种情况下,hero 是输入属性,hero 属性的值是对 hero 对象的引用 。当它自己的 name 属性的值发生变化时,对象引用并没有改变

father.component.html

<app-on-changes-parent></app-on-changes-parent>

on-changes-parent.component.html

<div>
    <h2>{{title}}</h2>
    <label>Power:</label>
    <input [(ngModel)]="power"/>
    <label>Hero Name:</label>
    <input [(ngModel)]="hero.name"/>

    <button pButton type="button" (click)="reset()">Reset Log</button> 

    <app-on-changes [hero]="hero" [power]="power"></app-on-changes>
  
</div>

on-changes-parent.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { OnChangesComponent } from '../on-changes/on-changes.component';
class Hero {
 constructor(public name:string) {
   this.name = name;
 }
}

@Component({
  selector: 'app-on-changes-parent',
  templateUrl: './on-changes-parent.component.html',
  styleUrls: ['./on-changes-parent.component.css']
})
export class OnChangesParentComponent implements OnInit {
  public title:string = 'OnChanges';
  public power:string = '';
  public hero:Hero = new Hero('');
  @ViewChild(OnChangesComponent)childCompent!:OnChangesComponent;
  constructor() {
    this.reset();
   }

  ngOnInit() {
    console.log(`on changes parent ngOnInit!`);
  }
  reset() {
    this.hero = new Hero('Windstorm');
    this.power = 'sing';
    // 访问子节点的函数
    if(this.childCompent) {
      this.childCompent.reset();
    }
  }

}

on-changes.component.html

<div>
  <p> {{hero.name}} can {{power}}</p>
  <h2>Change Log</h2>
  <p *ngFor="let chg of changeLog">{{chg}}</p>
</div>

on-changes.component.ts

import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
import { resetFakeAsyncZone } from '@angular/core/testing';
class Hero {
  constructor(public name:string) {
    this.name = name;
  }
 }
@Component({
  selector: 'app-on-changes',
  templateUrl: './on-changes.component.html',
  styleUrls: ['./on-changes.component.css']
})
export class OnChangesComponent implements OnInit {
  @Input() power:string = '';
  @Input() hero: Hero = new Hero('');

  public changeLog:string[] = [];
  constructor() { }

  ngOnInit() {
    console.log(`on changes component ngOnInit!`);
  }

  ngOnChanges(changes: SimpleChanges): void {

   for(const propName in changes) {
    const chng = changes[propName];
    const current = JSON.stringify(chng.currentValue);
    const previous = JSON.stringify(chng.previousValue);
    this.changeLog.push(`${propName}:currentValue=${current}, pervious=${previous}`);
   }
   
  }

  reset() {
    this.changeLog = [];
  }
}

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

2.学习地址:

Angular官网

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值