Angular 无法在CanDeactivate路由器保护中获取nextstate（下一个url）

我添加了以下router guard for CanDeactivate函数，以验证未保存的更改，这对我来说很好

导出接口CanComponentDeactivate{ canDeactivate:（）=>可观察的|承诺|布尔值； }

@Injectable（）
导出类CanDeactivateGuard实现CanDeactivate{
构造函数（私有事件服务：事件服务）{}
canDeactivate（组件：CanComponentDeactivate，路由？：ActivatedRouteSnapshot，
currentState？：路由器状态快照，
下一个状态？：字符串）{
设sub=新主题（）；
if（BaseApiService.callStack.length | | UnsavedData.IsThere UnsavedData）{
this.eventService.triggerEvent（CONST.SHOW\u DATA\u LOSS\u model{
showDataLossModal：正确，
潜艇：潜艇
});
}
return BaseApiService.callStack.length | | UnsavedData.isThereUnSavedData？false：true；
}
}

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

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

nextState？：string但每次我得到这个未定义的字符串时

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

您需要使用

nextState？：路由状态快照

下面是接口定义

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

接口CanDeactivate{
canDeactivate（成分：T，
currentRoute:ActivatedRouteSnapshot，
currentState:RouterStateSnapshot，
nextState？：路由器状态快照）：可观察的|承诺|布尔值
}

检查定义

更新

检查下面的完整示例

@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 { }

@组件({
选择器：“我的应用程序”，
模板：`Hello{{name}}

@Rhushikesh，我添加了一个关于Plunker的简单示例，你可以在控制台日志中看到下一个状态是在去家以外的路线时打印，你能检查一下你是否在做类似的事情吗，如果不能，你可以编辑Plunker来重现你的问题，那么我可以帮忙，干杯！！
@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 { }