了解父组件和子组件如何处理对象

Question

我想知道父对象和子组件之间共享对象的角度处理方式.

让我向您展示一个简单的示例: ParentComponent

@Component({
  selector: 'app-parent',
  template: `<app-children [(data)]="message"></app-children>
            <div>Parent: {{message}}</div>`,
})

export class ParentComponent implements OnInit {
  public message: string;

  ngOnInit() {
    this.message = 'Original message'
  }
}

儿童组件

@Component({
  selector: 'app-children',
  template: `<div>Children: {{data}}</div> 
             <a (click)="changeMessage('Children message')">Click me!</a>`
})

export class ChildrenComponent {
  @Input() public data: string;
  changeMessage(message: string) {
    this.data = message;
  }
}

当我点击"点击我!" 链接,我只看到子邮件更改,但不是父邮件.是不是同一个对象？

Answer 1

答案是它不是同一个对象，因为您在这里将它完全重新分配给新对象：

changeMessage(message: string) {
  this.data = message;
}

如果你想在子组件中更改它时查看父组件是否发生更改，则必须更改它，而不是创建新的，例如：

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

@Component({
  selector: 'app-root',
  template: `<app-children [data]="data"></app-children>
            <div>Parent: {{data.message}}</div>`,
})

export class AppComponent {
  public data = { message: "" };

  ngOnInit() {
    this.data.message = 'Original message'
  }
}

@Component({
  selector: 'app-children',
  template: `<div>Children: {{data.message}}</div> 
             <a (click)="changeMessage('Children message')">Click me!</a>`
})

export class ChildComponent {
  @Input() public data: { message: string };
  changeMessage(message: string) {
    this.data.message = message;
  }
}

stackblitz 上的演示。这里我们将一个对象（其中消息只是一个字段）传递给子组件，然后我们修改子组件内部的对象，并且更改会反映在两个组件中。尽管它确实有效，但不建议更改子组件内部的对象，出于这些目的，最好使用 @Output + EventEmitters。希望有帮助。