如何更新子级中父级的对象数据

Question

我正在为下拉列表制作自定义组件。 我有一个在ngOnInit()初始化的配置对象，并且我将用户提供的默认配置和配置组合为@Input() ，但是在父组件的运行时，如果我在我的配置中进行任何更改对象，它没有在我孩子的ngOnChanges()方法中更新。

我试过这个：

子组件

@Input() config: MyConfig;
        @Input() disabled: boolean
        
        ngOnChanges() {
                console.log('config', this.config); // this is not
                console.log('disabled', this.disabled); // this is detecting
            }

父组件html

<button (click)="changeConfig()">Change Config</button>
<app-child [config]="customConfig" [disabled]="newDisabled"></app-child>

父组件 ts

newDisabled = false;
customConfig = {
        value: 'code',
        label: 'name',
        floatLabel: 'Select'
    };

changeConfig() {
    this.customConfig.value = 'name';
    this.newDisabled = true;
}

对于 disbale 变量它正在工作，但对于配置它不是，我做错了什么吗？ 请帮忙

Answer 1

你的问题是你ngOnInit正在将config变量设置为一个新对象。 由于@Input()被调用一次，这会破坏您对原始对象的引用，并且不会检测到更改。

您可以使用 setter 和 getter 解决此问题。 我添加了一个堆栈闪电战来演示这个波纹管。

块引用

父组件

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  newDisabled = false;
  customConfig = {
    value: 'code',
    label: 'name',
    floatLabel: 'Select',
  };

  changeConfig1() {
    this.customConfig.value = 'name1';
    this.newDisabled = true;
    console.log('Change Config 1');
  }

  changeConfig2() {
    this.customConfig.value = 'name2';
    this.newDisabled = true;
    console.log('Change Config 2');
  }
}

子组件

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

class MyConfig {}

@Component({
  selector: 'hello',
  template: `<h1> config: {{config | json}}</h1><h1> disabled: {{disabled}}</h1>`,
  styles: [],
})
export class HelloComponent {
  private _defaultConfig = {
    key: 'default',
  };

  @Input() disabled: boolean;

  private _config: MyConfig;
  @Input() config: MyConfig;
  set () {
    if (!this.config) {
      this.config = new MyConfig(); // it is a class
    } else {
      this._config = {
        ...this.config,
        ...this._defaultConfig,
      };
    }
  }
  get () {
    return this._config;
  }

  ngOnChanges() {
    console.log('config', this.config);
    console.log('config', this._config);
    console.log('disabled', this.disabled);
  }
}

Answer 2

输入对象通过引用进行比较，因此如果您想反映子组件中的更改并触发ngOnChanges请执行以下操作：

changeConfig() {
 this.customConfig = {...this.customConfig, value: 'name'};;
 this.newDisabled = true;
}

并将您的以下代码从ngOnInit移动到ngOnChanges ，可能在初始化时输入更改可能不可用。

if (!this.config) {
   this.config = new MyConfig(); // it is a class
 } else  {
    this.config = {
           ...this._defaultConfig,
           ...this.config
          };
 }

Answer 3

问题是只有在对象customConfig发生更改时才会触发更改检测。 在您的示例中，仅更新value属性。 您可以在parent.component.ts执行以下操作：

 changeConfig() { this.customConfig = Object.assign(this.customConfig, { value: 'name'}); this.newDisabled = true; }

这将创建一个新的配置对象，其中包含更新的value属性和旧customConfig所有其他旧属性。