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

Question

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

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

请帮我解决此问题。

Answer 1

如果您处于路由环境中且依赖（旧）路由器，则可以使用OnActivate和OnDeactivate接口。两者都包含支持promises的方法。

对于routerOnDeactivate，如果返回一个承诺，路线变更将等到承诺结算。

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) => {
     ...
  })
}

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