时间戳

首页 > 解决方案 > 如何在 Angular 中有条件地路由和设置路径？

angular - 如何在 Angular 中有条件地路由和设置路径？

问题描述

我需要有条件地路由到我的 Angular 应用程序中的 2 个页面，

我的 Route.ts 文件

 const routes: Routes = [
  { path: '', redirectTo: 'exampleInfo', pathMatch: 'full' },
  { path: 'invalid', component:InvalidComponent},

在应用程序的某处，我将路由器设置为根据某些条件导航到“无效”。现在，当我点击我的 URL 时，它会在几分之一秒内打开 exampleInfo 页面，然后重定向到无效组件。

如何直接导航到无效组件而不有条件地点击默认组件？

提前致谢 。

标签： angular

解决方案

还可以切换路由数组中的组件。这对你有帮助吗？

const routes: Routes = [
  { path: '', redirectTo: 'exampleInfo', pathMatch: 'full' },
  { path: 'invalid', component:InvalidComponent},
  { path: 'exampleInfo', component: (() => {
      return SomeService.staticMethod() ? ExampleInfoComponent : InvalidComponent;
    })() }
  ...
]

编辑：但是，正如您所看到的，对于此解决方案，您需要能够提供静态方法，例如在服务中，但组件也应该工作，可以返回真/假。

推荐阅读