Angular 2:当我离开路线时如何应用回调

Question

这是一个例子,我在下面定义了一些路由AppComponent:

@RouteConfig([
  {path:'/',         name: 'Index', component: IndexComponent, useAsDefault: true},
  {path:'/:id/...',  name: 'User',  component: UserComponent},
  {path:'/plan',     name: 'Plan',  component: PlanComponent},
  {path:'/foo',      name: 'Foo',   component: FooComponent}
]}

在UserComponent我有另一个定义如下的路线:

@RouteConfig([
  {path:'/info',   name: 'UserInfo',   component: UserInfoComponent, useAsDefault: true},
  {path:'/order',  name: 'UserOrder',  component: UserOrderComponent},
  {path:'/detail', name: 'UserDetail', component: UserDetailComponent}
]}

有在这两个定义2个独立的导航AppComponent和UserComponent:

//AppComponent:
  <a [routerLink]="['User']">User</a>
  <a [routerLink]="['Plan']">Plan</a>
  <a [routerLink]="['Foo']">Foo</a>
--------------------------------------------
//UserComponent:
  <a [routerLink]="['UserInfo']">User Info</a>
  <a [routerLink]="['UserOrder']">User Order</a>
  <a [routerLink]="['UserDetail']">User Detail</a>

我期望的行为是:
当用户点击这些导航时,会出现一个模态并询问用户是否在离开此路线之前确认要保存.如果是,请自动保存用户的更改.

由于似乎无法获得这些更改UserComponent,我想将逻辑放入这些子组件(UserInfoComponent,UserOrderComponent和UserDetailComponent)中.那么,当用户将当前路由留在子组件内时,有什么方法可以触发回调？如果没有,有没有其他方法来实现这一目标？谢谢

Answer 1

路由器已经附带了生命周期钩子,CanDeactivate接口

允许/拒绝导航的钩子是routerCanDeactivate(nextInstruction, prevInstruction) { ... }.如果从此函数返回false,它将停止导航.

使用Plunker的示例:(在plunker中,路线2永远不会允许导航.你不能回到路线1)

@Component({
  selector:'route-2',
  template:'route 2 template'
})
class SecondRoute{
  routerCanDeactivate(){
    return false; // false stops navigation, true continue navigation
  }
}