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

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

本文关键字：何应用 应用 回调 我离开 路由 Angular      更新时间：2024-01-16

这是一个例子，我在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}
]}

在CCD_ 2中，我定义了另一条这样的路线：

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

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）中。那么，当用户将当前路由留在子组件中时，有什么方法可以触发回调吗？如果没有，还有其他方法可以实现吗？感谢

路由器已经配备了生命周期挂钩，CanDeactivate Interface

允许/拒绝导航离开的钩子是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
  }
}
相关文章：