無法獲取

Question

我已新增下列路由器後衛CanDeactivate功能CanDeactivate路由器後衛nextstate（下一個URL）來驗證這是對我工作的罰款未保存的更改

導出接口CanComponentDeactivate { canDeactivate：（） =>可觀察|承諾|布爾; }

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

檢查定義here。

更新

檢查完成下面的例子，

@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!!

希望這有助於！