Javascript 当父组件中的对象属性发生更改时，如何更新子组件中的对象

我有两个组件

父组件是

@Component({
  selector: 'parent',
  template: `
    <child [obj]="obj"> </child>
  `,
  styleUrls: [''],
})
export class parentComponent implements OnInit{

 obj = {
  id:1;
  name:'abc'
 }

}

如果我在父对象中更改了obj中的任何属性，则它在子组件中不会得到更新

interface OnChanges {
  ngOnChanges(changes: SimpleChanges): void
}

可能是因为obj参考没有改变

请给我建议解决这个问题的方法

  obj = {
    id: 1,
    name: 'Hello'
  }

  changeObject() {
    this.obj.name = 'Hello change';
  }

---

使用

ngOnChanges

收听输入属性的更改。将对象从父对象传递到子对象，并且无论何时，只要作为输入传递给子对象的对象中有任何更改，都将在子组件的

ngochanges

钩子中给出

SimpleChanges

对象

interface OnChanges {
  ngOnChanges(changes: SimpleChanges): void
}

示例

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
  // TODO(issue/24571): remove '!'.
  @Input()
  prop !: number;

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }
}

<button (click)="changeObject()">Change Object</button>

<hello name="{{ name }}" [obj]="obj"></hello>

---

有关

的详细信息，您必须使用下面的

ngOnChanges

父组件

export class AppComponent  {

  obj = {
    id:1,
    name:'abc'
  }

  name = 'Angular';

  changeObject() {
    this.obj.id++;
  }
}

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1><p>{{ obj | json }}</p>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit, OnChanges { 
  @Input() name: string;
  @Input() obj;

  ngOnInit() {

  }

  ngOnChanges(changes) {
    this.obj = changes.currentValue ? changes.currentValue.obj : this.obj;
  }
}

父模板

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
  // TODO(issue/24571): remove '!'.
  @Input()
  prop !: number;

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }
}

<button (click)="changeObject()">Change Object</button>

<hello name="{{ name }}" [obj]="obj"></hello>

更改对象

子组件

export class AppComponent  {

  obj = {
    id:1,
    name:'abc'
  }

  name = 'Angular';

  changeObject() {
    this.obj.id++;
  }
}

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1><p>{{ obj | json }}</p>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit, OnChanges { 
  @Input() name: string;
  @Input() obj;

  ngOnInit() {

  }

  ngOnChanges(changes) {
    this.obj = changes.currentValue ? changes.currentValue.obj : this.obj;
  }
}

从'@angular/core'导入{Component，Input，OnInit，OnChanges}；
@组成部分({
选择器：“你好”，
模板：`Hello{{name}！{{{obj|json}}
`，
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent实现OnInit，OnChanges{
@Input（）名称：string；
@输入（）对象；
恩戈尼尼特（）{
}
ngOnChanges（更改）{
this.obj=changes.currentValue？changes.currentValue.obj：this.obj；
}
}

---

工作示例在父组件中的

中，您真的使用了

模板URL

？对于内联DOM，您需要使用

模板

来代替。您的回答可能会有助于提供一些补充。谢谢@dwjohnston