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 文件中，日志在 localhost 上按预期显示，但在生产环境中什么都没有。 localStorage 中的“用户”对象在这两种情况下都存在并且是相同的。 注意： 这种方法在 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'

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

<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

这又如何？

路由配置：

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

首页组件：

@Component({
    template: `
        <mia-user-start *ngIf="mia"></mia-user-start>
        <user-start *ngIf="!mia"></user-start>
    `
})
export class ToppageComponent implements OnInit {

    mia: boolean;

    ngOnInit() {
        const user = JSON.parse(localStorage.getItem('MYW_CLOUD_USER_INFO'));
        this.mia = user && user.custom_fields.organization && user.custom_fields.organization.name_id === 'mia';
    }
}

Answer 2

你可以试试动态组件加载器。

详细信息在此处的 Angular 文档中：https://angular.io/guide/dynamic-component-loader