如何更新子級中父級的對象數據

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所有其他舊屬性。