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

请考虑您应该从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

答案是它不是同一对象，因为您将其完全重新分配 到这里的新对象：

_onchange_test_1

例如，如果要在子组件中进行更改时要查看其是否在父组件中发生更改，请您必须进行更改，例如，不要创建新的 ：

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

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

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

2 个答案: