在Angular中为具有相同路径名的不同基本href加载不同的组件

如何解决在Angular中为具有相同路径名的不同基本href加载不同的组件

我在我的角度应用程序中具有以下路径，对于home路径，基本href设置为/home/，并创建/create/

http://localhost:3000/home/account 
https://localhost:3000/create/account

动态路由配置路径

export const AppRoute = {
  'homeRoutes': [
    { path: 'account',loadChildren: () => import('@home').then(m => m.HomeModule) },{ path: 'test',loadChildren: () => import('@test').then(m => m.TestModule) },{ path: '**',component: PageNotFoundComponent }
  ],'createRoutes': [
    { path: 'account',loadChildren: () => import('@create').then(m => m.CreateModule) },{ path: 'login-test',loadChildren: () => import('@logintest').then(m => m.LoginTestModule) },component: PageNotFoundComponent }
  ]
};

在AppComponent.ts中

  resetRouter () {
    const baseHref = this.platformLocation.getBaseHrefFromDOM();
    if (baseHref.match('/home/')) {
      this.router.resetConfig(routes.homeRoutes);
    }
    if (baseHref.match('/create/')) {
      this.router.resetConfig(routes.createRoutes);
    }
  }

在路由模块中

const routes =    [
    { path: 'home/account',{ path: 'create/account',{ path: 'page-not-found',component: PageNotFoundComponent }
];

所以现在的问题是，

现在只能在http://localhost:3000/home/home/account中访问我的应用程序，这是不期望的。

此外，如果create可以访问http://localhost:3000/home/test路由，但实际的期望是抛出错误页面。

请帮助我配置这些路由。

解决方法

我会改变你的方法。由于路由配置只是一个常量，因此可以通过将映射的数组解压缩到routes常量（请参见this answer）中来复制两者的路由配置：

const routes =    [
    ...['home','create'].map(path => ({
      path: path,component: BaseComponent,loadChildren: () => import('@home').then(m => m.HomeModule) 
    })),{ path: 'test',loadChildren: () => import('@test').then(m => m.TestModule) },{ path: 'login-test',loadChildren: () => import('@logintest').then(m => m.LoginTestModule) },{ path: 'page-not-found',component: PageNotFoundComponent }
];

然后在BaseComponent.ts内部，使用ActivatedRoute API找出是home还是create：

public BaseComponent {
  public slug: string = undefined;
  construct(private route: ActivatedRoute) { }

  ngOnInit() {
    this.slug = this.route.snapshot.url[0].path;
  }
}

在html中，使用*ngIf显示home或create组件：

<app-home *ngIf="slug == 'home'"></app-home>
<app-create *ngIf="slug == 'create'"></app-create>