时间戳

首页 > 解决方案 > 了解父组件和子组件如何处理对象

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

问题描述

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

让我给你看一个简单的例子： 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;
  }
}

当我点击“点击我！” 链接，我只看到子消息更改，但没有看到父消息。不是同一个对象吗？

标签： angular

解决方案

考虑你应该从 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 并创建自定义双向数据绑定。

推荐阅读