Angular 2: как применить обратный вызов, когда я покидаю маршрут

Вот пример, у меня есть несколько маршрутов, определенных в 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). Итак, есть ли способ вызвать обратный вызов, когда пользователь покидает текущий маршрут внутри дочернего компонента? если нет, есть ли альтернативный способ добиться этого? Спасибо


javascript angular angular2-routing
person Zhi Li    schedule 05.04.2016    source источник
comment
вы можете просто установить значение (обратный вызов) при входе в маршрут, например x.currentRouteLeave=function(){dostuff()}? таким образом, вы можете позвонить someReachableObject.currentRouteLeave() по новому маршруту. Я использовал аналогичный шаблон для отслеживания последнего использованного текстового поля для применения кнопок общего редактора...   -  person dandavis    schedule 05.04.2016
comment
@dandavis, ты имеешь в виду собственный маршрутизатор с функцией currentRouteLeave?   -  person Zhi Li    schedule 05.04.2016

Ответы (1)


arrow_upward
6
arrow_downward

Маршрутизатор уже поставляется с перехватчиками жизненного цикла , CanDeactivate Interface

Крючок для разрешения/запрета перехода — routerCanDeactivate(nextInstruction, prevInstruction) { ... }. Это остановит навигацию, если вы вернете false из этой функции.

Пример с плункером: (в плункере маршрут 2 никогда не позволит уйти. Вы не можете вернуться к маршруту 1)

@Component({
  selector:'route-2',
  template:'route 2 template'
})
class SecondRoute{
  routerCanDeactivate(){
    return false; // false stops navigation, true continue navigation
  }
}
person Abdulrahman Alsoghayer    schedule 05.04.2016
comment
@ZhiLi Добро пожаловать, другие крючки жизненного цикла маршрутизатора тоже очень полезны. - person Abdulrahman Alsoghayer; 05.04.2016