Angular 4 条件路由/组件

Question

更新：见下文

所以我有一个应用程序，其中有两个不同的组织，当用户使用该应用程序时，我希望根据他所属的组织加载不同的组件。

方法一：在路由文件中做一个简单的条件语句。

import { Routes } from '@angular/router';

import { UserStartComponent } from './user-start.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

import { mia_UserStartComponent } from './mia/mia_user-start.component';
import { mia_UserDetailComponent } from './mia/user-detail/mia_user-detail.component';

const user = JSON.parse(localStorage.getItem('MYW_CLOUD_USER_INFO'));

const startcomp = user && user.custom_fields.organization && user.custom_fields.organization.name_id === 'mia' ? mia_UserStartComponent : UserStartComponent;
const detailcomp = user && user.custom_fields.organization && user.custom_fields.organization.name_id === 'mia' ? mia_UserDetailComponent : UserDetailComponent;


export const USERS_ROUTES: Routes = [
  { path: '', component: startcomp },
  { path: ':id', component: detailcomp }
];

这有效，但仅在本地主机上，当我推送到 heroku 并在生产中运行时，应用程序只会提供错误的组件。我已经尝试将日志输出添加到这个 user-route.ts 文件中，日志在本地主机上按预期显示，但在生产中什么都没有。localStorage 中的“user”对象在两种情况下都存在并且是相同的。 注意：这种方法也适用于 Angular 2，在 Angular 4 中，在生产中运行时路由文件似乎发生了一些事情，但谁知道是什么......也许它以某种方式编译，使 if 条件中断。

方法 2. 使用路线和守卫。为不同的组织添加两个警卫。有效，但路线必须不同。下面的代码不起作用，因为第一个空路由总是被检查，但第二个不是。我需要路径为空（''）。

export const USERS_ROUTES: Routes = [
  { path: '', component: mia_UserStartComponent, canActivate: [OrganizationMiaGuard] },
  { path: '', component: UserStartComponent, canActivate: [OrganizationCelsiusGuard] }
  { path: ':id', component: detailcomp }
];

由于关于守卫和条件路由的每个主题似乎都是关于是否显示“家”或“登录”，我真的不知道是否有更好的方式来使用守卫。理想情况下是这样的：

{ path: '', component: mia_UserStartComponent, canActivate: [OrganizationMiaGuard], **alternative**: UserStartComponent }

方法 3. 在父模板中使用 ngIf。这也有效，但在进一步向下移动到“DetailsComponent”的路线时，我必须手动隐藏和显示组件

那么你如何做一些看似微不足道的事情，比如根据条件显示不同的组件？

更新1：

最接近的，虽然不起作用，但我达到了我想要的行为是使用命名的路由器插座。

加载了正确的组件，但仅适用于两条顶级路线。那些有空路径的。对于带有 id 参数的两条路线，我得到

Error: Cannot match any routes. URL Segment: 'reports/1'

这很奇怪，因为如果我手动输入 url，一切都会正确加载：/ 调用：

<a [routerLink]="[userId]" ....

——

{ path: '', outlet: 'UserStartComponent', pathMatch: 'full', component: UserStartComponent },
{ path: '', outlet: 'mia_UserStartComponent', pathMatch: 'full', component: mia_UserStartComponent},

{ path: ':id', outlet: 'UserDetailComponent', pathMatch: 'full', component: UserDetailComponent },
{ path: ':id', outlet: 'mia_UserDetailComponent', pathMatch: 'full', component: mia_UserDetailComponent},

——

<router-outlet *ngIf="organization == 'celsius_golf'" name='UserStartComponent'></router-outlet>
<router-outlet *ngIf="organization == 'mia'" name='mia_UserStartComponent'></router-outlet>

<router-outlet *ngIf="organization == 'celsius_golf'" name='UserDetailComponent'></router-outlet>
<router-outlet *ngIf="organization == 'mia'" name='mia_UserDetailComponent'></router-outlet>

Answer 1

您可以尝试动态组件加载器。

详细信息位于 Angular 文档中：https ://angular.io/guide/dynamic-component-loader