Question

我有一些父数据，当从一个子组件导航回父级时，应该从数据库获取这些数据。这个孩子用router-outlet显示。

我们启动该用户从登录页面导航到父级，没有子级可见。我在父级中有列表，当导航到页面

时从数据库中获取

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()，以便从数据库中获取新版本的数据，因此我不需要刷新页面。

Answer 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'])
   });
}

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

1 个答案: