1

我正在尝试实施canDeactivate警卫。为此，我需要知道要导航到的路由的组件实例。

canDeactivate(
    component: ComponentCanDeactivate,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
    nextState: RouterStateSnapshot
): Observable<boolean> {
    return new Observable((observer: Observer<boolean>) => {
        console.log('componet', component);
        console.log('state', state);
        console.log('nextstate', nextState);
        this.routerService.doSomething(nextState, route);
        observer.next(true);
    });
}

我想知道是否可以从 nextState 获取组件？我试过这样的事情：

nextState.root.component

但它返回AppComponent给我，因为这不是我要导航到的组件的名称。

我该怎么做呢？或者我应该以其他方式获得一个实例？

编辑：
我可以在 RouterStateSnapshot 内的浏览器的开发人员终端中看到组件实例（NextComponent）->

_root: TreeNode  
url: "/Nextcomponent/15708/childcomponent"  
_root: TreeNode  
children: Array(1)  
0: TreeNode  
children: Array(1)  
0: TreeNode  
children: Array(1)  
0: TreeNode  
children: Array(1)  
0: TreeNode  
children: Array(1)  
0: TreeNode  
children: []  
value: ActivatedRouteSnapshot  
component: class NextComponent
                 ^^^^^^^^^^^^^

但无法在我的代码中获取它。

4

1 回答 1

0

I see 2 things:

  1. you should never use new Observable(), and and I don't see why you put your code inside an observable (you may just remove the Observable).
  2. I would recommand implementing a method canDeactivateMyFeatureGuard in your component. You can make your component implement a generic AppCanDeactivateMyFeatureGuard(where your guard is named MyFeatureGuard), which defines canDeactivateMyFeatureGuard.
    Then you call this method in the guard.

It would look like this:

export class MyComponent implements AppCanDeactivateMyFeatureGuard {
  // ...
  canDeactivateMyFeatureGuard(): boolean {
    return this.isLocked; // or whatever condition owned by the component, or service call...
  }
}

and the guard:

export class MyFeatureGuard implements CanDeactivate {
  // ...
  canDeactivate(
                component: ComponentCanDeactivate,
                route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot,
                nextState: RouterStateSnapshot
              ): boolean {
    // logic is now in each component, where it can handle the way you wish.
    return component.canDeactivateMyFeatureGuard(); 
  }
}
于 2021-02-16T12:37:54.447 回答