Angular生命周期钩子ngOnChanges的使用 - 补充监听子组件

﹏ヽ暗。殇╰゛Y 2023-06-10 09:27 11阅读 0赞

**时机：**当被绑定的输入属性的值发生变化时调用，不过首次调用是会发生在ngOnInit()之前的。当然必须是父组件使子组件输入属性值变化时才会调用，子组件自己改变输入属性的值不会调用。  
ngOnChanges()方法获取了一个对象，它可以同时观测多个绑定的属性值，它把每个发生变化的属性名都映射到了一个SimpleChange对象， 该对象中有属性的当前值和前一个值。  
**触发条件：**@input属性(输入属性)发生变化时，会调用。非此属性，不会调用。当输入属性为对象时，当对象的属性值发生变化时，不会调用，当对象的引用变化时会触发。

画面效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

**app.component.ts**

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      greeting: string = 'Hello';
    
      user: { name: string } = { name: 'Tom' };
    }

**app.module.ts**

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    import { ChildComponent } from './components/child/child.component';
    
    @NgModule({
      declarations: [AppComponent, ChildComponent],
      imports: [BrowserModule, FormsModule],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

**app.component.html**

<div style="background: lightcoral;padding: 10px;">
        <h3>我是父组件</h3>
        <div>
            问候语：<input type="text" [(ngModel)]="greeting">
        </div>
        <div>
            姓名：<input type="text" [(ngModel)]="user.name">
        </div>
    </div>
    <app-child [greeting]="greeting" [user]="user"></app-child>

**child.component.ts**

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
    
    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html'
    })
    export class ChildComponent implements OnChanges {
      @Input()
      greeting: string;
      @Input()
      user: { name: string };
      message: string = '初始化消息';
      log: string = '';
    
      ngOnChanges(changes: SimpleChanges): void {
        console.log(JSON.stringify(changes, null, 2));
        this.log = JSON.stringify(changes, null, 2);
      }
    }

**child.component.html**

<div style="background:silver;padding: 10px;">
        <h3>我是子组件</h3>
        <div>问候语：{
       {greeting}}</div>
        <div>姓名：{
       {user.name}}</div>
        <div>消息：<input [(ngModel)]="message"></div>
        <pre style="color: red;">log：{
       {log}}</pre>
    </div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20230531/bfd2038765034a45852c031ef3c530b7.png