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

【问题标题】：Load different components for different base href with same path name in Angular在Angular中为具有相同路径名的不同基本href加载不同的组件
【发布时间】：2020-08-29 09:23:59
【问题描述】：

我在我的 Angular 应用程序中有以下路径，对于 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) },
    { path: '**', 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', loadChildren: () => import('@home').then(m => m.HomeModule) },
    { path: 'create/account', 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 }
];

所以现在的问题是，

我的应用现在只能在 http://localhost:3000/home/home/account 中访问，这是意料之中的。

另外，如果访问 create 路由 f.e http://localhost:3000/home/test 有效，但实际期望是抛出错误页面。

请帮我配置这些路由。

【问题讨论】：

为什么...为什么要根据路径的第一部分将路由器分成 2 个路由器来尝试路由？这是解决问题的一种非常糟糕和笨拙的方法。只需将baseHref 保留在/ 并创建一条同时捕获home 和create 的路由。在该组件中，您可以检查ActivatedRoute 并确定您是在家还是在创建，并在 HTML 模板中显示不同的内容/组件...
这是因为我的应用部署在http://localhost:3000/MyAPP，root不属于angular
好的，所以你的baseHref = '/MyAPP' 变成了http://localhost:3000/MyAPP/home/account 和http://localhost:3000/MyAPP/create/account。这并不重要

标签： javascript angular typescript routes

【解决方案1】：

我会改变你的方法。由于路由配置只是一个常量，因此您可以通过将映射数组解压缩到 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>

【讨论】：

这行不通，因为home 将有一些特定的路由集，create 不应访问
好的，好吧，然后复制配置而不是使用数组扩展：'D ActivatedRoute 方法保持不变，并且比您尝试执行的 hack 更可取。