Question

我们有一个有角度的应用程序，其中外部部分供外部用户使用，内部部分供内部用户使用。

我们希望它们具有相同的url，但具有不同的组件（内部组件与外部组件完全不同）。

Angular可能吗？如果我使用后卫，它将不会比第一条路更远。如果使用匹配器，则不适用于嵌套路由...

以下是一些所需的伪代码：

const appRoutes: Routes = [
   // internal zone
   { path = '', children: internRoutes, [condition checking something on global service] },
   // external zone
   { path = '', children: externRoutes, [condition checking something on global service] }
];

Answer 1

我们找到了解决方案。

在应用程序路由模块中，我们只分配一个空数组（forRoot），因为整个应用程序分为外部和内部。

 @NgModule({
    imports: [
          // by default we have no routes
          // the app component will inject the routes based on I or E (same URL different modules/components)
          RouterModule.forRoot([], { enableTracing: true })
    ],
    ...
 })

在我们的应用程序组件中，根据条件（内部或外部）添加具有不同子路由的路由。

constructor(private router: Router, private state: State, ...) {
    // here we add the routes which is different based on zone (dynamic routes)
    this.router.config.unshift(
        {
            path: '',
            children: this.state.zone == 'I' ? internRoutes : externRoutes
        }
    );

Answer 2

您可以通过使用Angular的useFactory提供程序提供RouterModule的ROUTES来使用处理应加载哪个模块的模块。

代码可能是这样的。

// HandlerModule

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule
  ],
  providers: [
    {
      provide: ROUTES,
      useFactory: configHandlerRoutes,
      deps: [SessionService],
      multi: true
    }
  ]
})


export class HandlerModule {}

export function configHandlerRoutes(sessionService: SessionService) {
  let routes: Routes = [];
  if (sessionService.isLoggedIn()) {
    routes = [
      {
        path: '', loadChildren: () => import('app/member/member.module').then(mod => mod.MemberModule)
      }
    ];
  } else {
    routes = [
      {
        path: '', loadChildren: () => import(app/guest/guest.module).then(mod => mod.GuestModule)
      }
    ];
  }
  return routes;
}

然后在您的AppRoutingModule中，路径“”的模块将成为HandlerModule：

// AppRoutingModule

 {
    path: '',
    loadChildren: () => import('app/handler/handler.module').then(mod => mod.HandlerModule)
}

在SessionService之后，您必须在提供方法isLoggedIn的值更改时更新Router.config，因为该应用程序将仅加载首次加载的页面（模块）。这是因为HandlerModule中useFactory提供程序使用的函数“ configHandlerRoutes”仅在我们第一次导航到“”路径时才执行，之后Angular Router已经知道他必须加载哪个模块。

最后，您必须在SessionService中完成

：

 export class SessionService {
  private loggedIn: boolean;
  constructor(private router: Router) {
    this.loggedIn = false;
  }

  public isLoggedIn(): boolean {
    return this.loggedIn;
  }

  public setLoggedIn(value: boolean): void {
    const previous = this.loggedIn;
    this.loggedIn = value;
    if (previous === this.loggedIn) {
      return;
    }
    const i = this.router.config.findIndex(x => x.path === '');
    this.router.config.splice(i, 1);
    this.router.config.push(
      {path: '', loadChildren: () => import('app/handler/handler.module').then(mod => mod.HandlerModule)}
    );
  }
}

就是这样。

如果您想再参考一下，这里是一篇文章，他们使用相同的方法：https://medium.com/@german.quinteros/angular-use-the-same-route-path-for-different-modules-or-components-11db75cac455

根据条件使用相同网址的多个路由

2 个答案: