无法在 CanDeactivate 路由器防护中获取下一个状态（下一个 url ）

Question

我为 CanDeactivate 功能添加了以下路由器防护以验证未保存的更改，这对我来说很好用

导出接口 CanComponentDeactivate { canDeactivate: () => Observable | 承诺 | 布尔值；}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
    constructor( private eventService: EventsService) { }
  canDeactivate(component: CanComponentDeactivate, route?: ActivatedRouteSnapshot,
    currentState?: RouterStateSnapshot,
    nextState?: string) {
      let sub = new Subject();
      if (BaseApiService.callStack.length || UnsavedData.isThereUnSavedData) {
          this.eventService.triggerEvent(CONST.SHOW_DATA_LOSS_MODAL, {
              showDataLossModal: true,
              sub : sub
          });
      }
      return BaseApiService.callStack.length || UnsavedData.isThereUnSavedData ? false : true;
  }
}

但是当我检测到是否有任何未保存的更改时，我会显示一个带有“是”和“否”按钮的对话框。

如果用户单击是，我必须清除未保存的更改并重定向到用户单击的 URL。为此，我必须检查用户想要在 CanDeactivate 函数上重定向的 URL 是什么。

nextState?: string但是每次我都没有定义。

如果我做了任何更改，请纠正我。

Answer 1

你需要使用，

nextState?: RouterStateSnapshot

下面是接口定义，

interface CanDeactivate<T> { 
  canDeactivate(component: T, 
  currentRoute: ActivatedRouteSnapshot, 
  currentState: RouterStateSnapshot, 
  nextState?: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean
}

在此处检查定义。

更新

检查下面的完整示例，

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <hr />
    <a routerLink="/home" >Home</a>
     <a routerLink="/other" >Other</a>
  <hr />
  <router-outlet></router-outlet>
  `
})
class AppComponent { name = 'Angular'; }

@Component({
  template: `<h1>Home</h1>
  
  <a routerLink="/other" >Go to Other from Home</a>
  `
})
class HomeComponent {
}

@Component({
  template: `<h1>Other</h1>
  `
})
class OtherComponent {
}

@Injectable()
class CanDeactivateHome implements CanDeactivate<HomeComponent> {
  canDeactivate(
    component: HomeComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
   
   console.log(component);
   console.log(currentRoute);
   console.log(currentState);
   console.log(nextState);
   
   return true;
  }
}

const appRoutes: Routes = [
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: 'home',  component: HomeComponent, canDeactivate: [CanDeactivateHome] },
  { path: 'other',  component: OtherComponent }
];

@NgModule({
  imports:      [ BrowserModule, RouterModule.forRoot(appRoutes)],
  declarations: [ AppComponent, HomeComponent, OtherComponent ],
  providers: [CanDeactivateHome],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

检查这个Plunker！！