如何使用angular2从按钮单击父组件到子组件进行通信？

Question

我有一个父 AppComponent 和另一个名为“ChildComponent”的组件。它们都共享一个名为“appState”的服务，该服务被注入两者（我使用的是https://github.com/AngularClass/angular-starter，app.service.ts 类在这里是https://github.com/AngularClass/angular-starter/blob/master/src/app/app.service.ts，这是我所指的appState）。

ChildComponent 有自己的属性“mylist”，它是一个对象数组，设置为等于 this.appState.mylist。

@Component(...)
export class ChildComponent {
  mylist = any;
  constructor(@Inject(AppState) appState) {
    public appState = appState;
    mylist = appState.state.mylist;
  }
}

我有一个显示 {{mylist}} 的 ChildComponent 模板

ParentComponent 有一个模板，该模板有一个“添加我”按钮，其唯一功能是添加到 this.appState.mylist。

我的问题是，当我点击父组件上的“添加我”按钮时，我在函数中记录了 this.appState.mylist。

@Component(...)
export class AppComponent {
  constructor() {
    public appState = appState;
    appState.mylist = [];
  }

  addMe() {
    this.appState.state.mylist.push({"itemName":"Something"});
    console.log(this.appState.mylist) // this outputs correctly and I see mylist growing
  }
}

我了解了 eventEmitters 如何发出事件来更新父级，但就我而言，我想更新 AppComponent 模板中的一个组件。怎么了？如何使 child.component.html 中的“mylist”显示正确的数据？

我看到的所有文档似乎都在谈论从子到父通信的 EventEmitters，这似乎对我不起作用，因为我试图从我的父 AppComponent 到子 ChildComponent 进行通信。

问题plunkr： https://plnkr.co/edit/xaE905r4xNZcVJzWQwsr?p=preview

Answer 1

更新： OP 设置服务的方式，问题是子组件没有得到更新的appState.mylist。因此，我提供的解决方案是使用Subject 和Observable 通知子组件更改并通过subscription. 拉入新数据

child.components.ts：

mylist: any;

constructor(private appState: AppState){
  this.appState.dataString$.subscribe(
    data => {
      this.mylist = data.mylist; 
    });
}

请查看plunker demo 获取service.ts 代码。

原帖：

由于您有父子关系，您可以像使用数据绑定一样轻松地将mylist 传递给子组件。 <child-component [mylist]="mylist"></child-component>

在子组件中，您可以使用@Input() 将父组件传递的数据绑定到子组件中的mylist 变量。

如果你还想使用共享服务，那么你就在正确的轨道上，只需要清理父子组件中的代码，如下所示：

父母：

constructor(private appState: AppState){
    this.appState.mylist = [];
  }

  addMe() {
    this.appState.mylist.push({"itemName":"Something"});

    console.log(this.appState.mylist) // this outputs correctly and I see mylist growing

    this.mylistFromParent.push({"itemName":"Something"}); 
  }

孩子：

mylist: any;

  constructor(private appState: AppState){
  this.mylist = this.appState.mylist;
}

我创建了这个demo 来说明这两种情况。

希望这会有所帮助！