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

Question

我想知道 Angular 如何处理父组件和子组件之间共享的对象。

让我给你看一个简单的例子： 父组件

@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

考虑你应该从 child 发出改变的值，而且你的发射器名称应该是 [your bind var name]+'Change' 所以它会起作用：

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

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

export class AppComponent {
  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 ChildComponent {
  @Input() public data: string;
  @Output() dataChange= new EventEmitter<string>();
  changeMessage(message: string) {
    this.data = message;
    this.dataChange.emit(this.data);
  }
}

检查DEMO 和creating custom two-way data bindings。

Answer 2

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

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;
  }
}

Demo on stackblitz。 这里我们将一个object（其中message它只是一个字段）传递给子组件，并且我们在子组件中修改对象，然后更改为反映在两个组件中。尽管它可以工作，但不建议更改对象在子组件内，出于这些目的最好使用 @Output + EventEmitters。希望对您有所帮助。