Question

更新：见下文

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

方法1：在路线文件中做一个简单的条件。

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 }
];

这是有效的，但仅限于localhost，当我推送到heroku并在生产中运行时，应用程序只提供了错误的组件。我已经尝试将日志输出添加到此user-route.ts文件中，日志在localhost上按预期显示，但在生产时没有任何内容。＆＃34;用户＆＃34;来自localStorage的对象在两种情况下都存在并且是相同的。 注意：这种方法也适用于Angular 2，Angular 4在生产中运行时似乎与routes文件发生了什么但是谁知道...也许它以某种方式编译使得if有条件的休息。

方法2。使用路线和警卫。为不同的组织添加两名警卫。工作但路线必须不同。下面的代码不起作用，因为始终检查第一个空路径，但第二个不是。我需要路径为空（＆＃39;＆＃39;）。

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

因为关于警卫和条件路由的每个主题似乎都是关于是否要显示＆＃34; home＆＃34;或者＆＃34;登录＆＃34;我真的不知道是否有更好的方法来使用警卫。理想情况如下：

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

方法3。在父模板中使用ngIf。这也有效，但我必须手动隐藏和显示组件，当进一步向下移动到＆＃34; DetailsComponent＆＃34;

那你怎么做一些看似微不足道的事情，就像根据条件显示不同的组件一样？

更新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

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

详细信息请参见Angular文档：https://angular.io/guide/dynamic-component-loader

Answer 2

这怎么办？

路由配置：

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';
    }
}

Angular 4条件路由/组件

2 个答案: