Question

我有不同的路线，每个路线代表向导中的一个步骤。

const routes: Routes = [
  {
    path: ':id',
    component: ParentComponent,
    children: [
      {path: 'step1', component: Step1Component},
      {path: 'step2', component: Step2Component},
      {path: 'step3', component: Step3Component},
      {path: 'step4', component: Step4Component},
      {path: '**', redirectTo: '???'}
    ]
  }
];

现在，我想要一个条件redirectTo，这样当用户进入第3步并访问根URL时，他将被重定向到第3步。

我要在重定向上执行的逻辑示例：

if(this.stepService.getCurrentStep(id) === 3) {
  return 'step3';
} else {
  return 'step1';
}

如何，所有路由仍应可访问，这样，当用户转到/ step2或/ step4时，他不会被重定向到步骤3。我认为canActivate守护程序因此不适用。

我当时正在考虑创建一个额外的组件来处理重定向，但似乎也有点

Answer 1

我想出了解决方法。

您可以在通配符路由上添加canActivate防护：

const routes: Routes = [
  {
    path: ':id',
    component: ParentComponent,
    children: [
      {path: 'step1', component: Step1Component},
      ...
      {path: '**', canActivate:[RedirectGuard]}
    ]
  }
];

然后在后卫中，您应该返回UrlTree而不是布尔值：

@Injectable({
  providedIn: 'root'
})
export class RedirectGuard implements CanActivate {

  constructor(private stepService: StepService) {}

   canActivate(
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<UrlTree> {
     const id = next.parent.params.id;
     // Some logic  
     return of(this.router.parseUrl(state.url + '/rejection'));
  }
}

请注意，此解决方案要求角度为7.1 +

信用额转到该博客文章：https://juristr.com/blog/2018/11/better-route-guard-redirects/

Angular 2+条件通配符重定向

1 个答案: