Angular: маршрутизатор naviagte приходит до завершения охраны

Question

внутри моего Angular 8 приложения, у меня есть этот файл маршрутизации:

const myRoutes: Routes = [
  {path: '', component: FirstComponent , canActivate: [RegistrationSrcdGuard]},
  {path: 'FirstComponent ',
    component: FirstComponent ,
    canActivate: [myModuleGuard] ,
    children:[
      {path: 'SecondComponent ', component: SecondComponent , canActivate: [myModuleGuard]},
    ]
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(myRoutes)
  ],
  declarations: [],
  exports: [
    RouterModule
  ]
})

внутри моего FirstComponent.ts, у меня есть это действие навигации:

goToSecond(){
      this.router.navigate(['FirstComponent/SecondComponent '], {skipLocationChange: true});
}

Моя проблема в том, что навигация, кажется, зависает, поскольку, как я себе представляю, обработка « myModuleGuard » занимает некоторое время,

, поэтому в уродливом рабочем окружении я Мы изменили это следующим образом:

goToSecond(){
  setTimeout(() => {
      this.router.navigate(['FirstComponent/SecondComponent '], {skipLocationChange: true});
  });
}

И это заставляет его работать, но это кажется грубым. Особенно использование setTimeout

Моя гвардия выглядит так:

    @Injectable()
    export class MyGuard implements CanActivate {
      constructor(private myService: MyService) {}
      canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        const result = this.myService.getPermission();
        return result ;
      }

public getPermission() {
    let myResult : boolean
    myTreatment().subscribe(
      res => {
        return myResult = res;
      },
      err => {}
    );
    return myResult ;
  }
    }

Ваши предложения, чтобы сделать его лучше?

Answer 1

Охрана должна быть:

@Injectable()
export class MyGuard implements CanActivate {

  constructor(private myService: MyService) {}

  canActivate(next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): Observable<boolean> {
      return this.myService.getPermission();
  }

  canActivateChild(next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): Observable<boolean> {
      return this.canActivate(next, state);
  }

}

Служба должна содержать:

public getPermission(): Observable<boolean> {
    return myTreatment();
}

Answer 2

Предполагая, что метод myTreatment() возвращает Observable, вы должны возвращать это Observable снова в методе getPermissions(), а не подписываться на него.

Измените свой метод, как показано ниже:

  public getPermission() {
    /**
     * If myTreatment() method returns an Observable of boolean type
     * remove the pipe() method altogether.
    */

    return myTreatment().pipe(
      map(res => {
        let result = false;
        // Perform your logic and assign a boolean value to the variable
        return result;
      })
    );
  }