从子导航到父并在父Angular2中执行函数答案

【问题标题】：Navigate to parent from child and execute functions in parent Angular2从子导航到父并在父Angular2中执行函数
【发布时间】：2017-03-20 20:19:36
【问题描述】：

我有一些数据的父级，当从一个子组件导航回父级时，应该从数据库中获取这些数据。此子项与路由器插座一起显示。

我们开始将用户从登录页面导航到父级，没有可见的子级。我在父级中有列表，导航到页面时从数据库中获取

constructor(private todoService: TodoService) {
   this.todoService.getData()
     .subscribe(data => this.data)
}

这很好用。显示此列表，当用户选择其中一项时，用户会导航到一个孩子，在那里他用新值更新它，然后导航回父级。喜欢：

update(todo) {
  this.service.updateData(todo)
    .subscribe(data => {
      console.log(data);
      this.router.navigate(['parent'])
   });
}

问题：当用户导航回父级时，父级列表没有更新，我认为是因为父级总是在那里？当我刷新列表时没问题，所以在子作品中更新。

如何告诉父组件执行构造函数中的this.todoService.getData()，这样我就可以从数据库中获得新版本的数据，所以我不需要刷新页面。

【问题讨论】：

你的父构造函数在被销毁之前永远不会第二次执行所以我的建议是使用 eventemmiter 通知父更新让我知道你是否需要示例？
你能把你的模板也分享给父母孩子吗？

标签： angular

【解决方案1】：

您提到您的孩子在路由器插座后面。您可以使用共享服务，但我认为这里可能有点矫枉过正，因为您只想告诉父级执行功能。因此，请改用 Subject 来告诉父级执行您想要的功能。

顺便说一句，将您的父函数移至OnInit：

ngOnInit() {
  this.todoService.getData()
    .subscribe(data => {
      this.data = data;
    });
}

完成后，在您的父级中声明一个主题

public static updateList: Subject<boolean> = new Subject();

在父构造函数中，监听子动作并订阅它：

ParentComponent.updateList.subscribe(res => {
   this.todoService.getData()
    .subscribe(data => {
       this.data = data;
    });
});

在你的孩子身上：

update(todo) {
  this.service.updateData(todo)
    .subscribe(data => {
      console.log(data);
      // add this!
      ParentComponent.updateList.next(true);
      this.router.navigate(['parent'])
   });
}

【讨论】：