angular - 从子导航到父级并在父级 Angular2 中执行函数

Question

我有一些数据的父级，当从一个子组件导航回父级时，这些数据应该从数据库中获取。这个 child 是用路由器 socket 显示的。

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

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

这很好用。显示此列表，当用户选择这些项目之一时，用户将导航到一个 child ，在那里他用新值更新它，然后导航回父级。喜欢:

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

问题: 当用户导航回父级时，父级列表没有更新，我认为是因为父级始终存在？当我刷新列表时没问题，所以更新子工作。

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

Answer 1

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

顺便说一句，将父级中的函数移至 OnInit:

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

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

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

在父构造函数中，监听子 Action 并订阅它:

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

在您的 child 身上:

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