首页 文章

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

提问于
浏览 次
2

我有一个父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;
  }
}

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

ParentComponent有一个模板，它有一个“Add Me”按钮，其唯一的功能是添加到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模板中的组件 . 怎么了？如何才能使my.component.html中的“mylist”显示正确的数据？

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

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

angular

1 回答

  • 4

    UPDATE: OP的服务设置方式，问题是子组件未获得更新的 appState.mylist . 因此，我提供的解决方案是使用 Subject 和 Observable 通知子组件更改并通过 subscription. 提取新数据

    child.components.ts：

    mylist: any;

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

    有关 service.ts 代码，请参阅plunker demo .

    Original Post:

    由于您具有父子关系，因此您可以像使用数据绑定一样轻松地将 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来说明这两种情况 .

    希望这可以帮助！

    回复于

相关问题