Question

我有一个父AppComponent和另一个名为＆＃34; ChildComponent＆＃34;的组件。他们两人共享一个名为＆＃34; appState＆＃34;注入两者（我正在使用https://github.com/AngularClass/angular-starter，app.service.ts类在这里https://github.com/AngularClass/angular-starter/blob/master/src/app/app.service.ts，这是我指的appState）。

ChildComponent有自己的属性＆＃34; mylist＆＃34;这是一个对象数组，设置等于this.appState.mylist。

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

我有一个显示{{mylist}}

的ChildComponent模板

ParentComponent有一个模板，其中包含一个＆＃34; Add Me＆＃34;按钮，其唯一功能是添加到this.appState.mylist。

我的问题是，当我点击＆＃34;添加我＆＃34;父组件上的按钮，在函数中我记录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模板中的组件。怎么了？我怎样才能使它成为＆＃34; mylist＆＃34;在我的child.component.html中会显示正确的数据吗？

我所看到的所有文档似乎都在讨论从子级到父级进行通信的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代码{/ 1}}。

原帖：

由于您有父子关系，因此您可以像使用数据绑定一样轻松地将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"}); 
  }

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

希望这有帮助！

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

1 个答案: