在导航到另一个零部件之前，先保存Angular 2零部件中的数据

Question

在从特定组件导航到另一个组件之前，我想将一些与Angular 2组件相关的数据保存到数据库中，以便数据库保存的数据能够显示在第二个组件上。为了做到这一点，我在第一个组件的ngOnDestroy（）钩子上调用了save方法，在第二个组件ngOnInit（）上调用了display。

然而，看起来在ngOnDestroy（）完全完成之前调用了ngOninit（）。这意味着在将数据保存到数据库之前，第二个组件将检索旧数据并进行显示。

请帮我解决这个问题。

Answer 1

您可以为此目的实现CanDeactivate。只有当Promise从routerCanDeactivate返回并解析为true 时，路由器才会继续路由更改

另请参阅https://angular.io/docs/ts/latest/api/#！？apiFilter=烛光激活

rc.x

routerCanDeactivate(currTree?: RouteTree, futureTree?: RouteTree) : Promise<boolean> {
  return new Promise<boolean>((resolve, reject) => {
     ...
  })
}

在rc.x中不推荐使用beta版或路由器

routerCanDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction)  {
  return new Promise<boolean>((resolve, reject) => {
     ...
  })
}

不推荐使用的路由器也有OnDeactivate。https://angular.io/docs/ts/latest/api/router-deprecated/index/OnDeactivate-interface.html.这也可能被添加到新的路由器中。

Answer 2

如果您在路由的上下文中，并且您依赖（旧的）路由器，那么您可以使用OnActivate和OnDeactivate接口。两者都包含支持promise的方法。

对于routerOnDeactivate，如果返回promise，则路由更改将等待promise解决。