在导航到另一个组件之前从 Angular 2 组件保存数据

Question

我想在从那个特定组件导航到另一个组件之前将一些 Angular 2 组件相关数据保存到数据库中，以便数据库保存的数据能够显示在第二个组件上。为了做到这一点，我在第一个组件的 ngOnDestroy() 挂钩和 display[=22= 上调用了 save 方法] 第二个组件上的方法 ngOnInit().

但是，看起来 ngOninit() 在 ngOnDestroy() 完全完成之前调用。这意味着在将数据保存到数据库之前，第二个组件检索旧数据并显示。

请帮我解决这个问题。

Answer 1

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

对于 routerOnDeactivate 一个，如果返回一个 promise，路由更改将等到 promise 完成。

Answer 2

您可以为此实施 CanDeactivate。如果 Promise 从 routerCanDeactivate 返回解析为 true

，则路由器仅继续路由更改

另见 https://angular.io/docs/ts/latest/api/#!?apiFilter=candeactivate

rc.x

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

beta.x 或路由器在 rc.x

中已弃用

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

router-deprecated 还有OnDeactivate。 https://angular.io/docs/ts/latest/api/router-deprecated/index/OnDeactivate-interface.html。这也可能会添加到新路由器中。