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}
]}

AppComponent 和 UserComponent 中定义了 2 个独立的导航：

//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

路由器已经自带lifecycle hooks , CanDeactivate Interface

allow/deny 离开的挂钩是 routerCanDeactivate(nextInstruction, prevInstruction) { ... }。如果您在此函数中 return false，它将停止导航。

示例With Plunker：（在plunker中，路线2将永远不允许导航离开。您无法返回路线1）

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

Angular 2: 如何在离开路由时应用回调

Angular 2: How to apply a callback when I leave a route

javascript

angular

angular2-routing