角4条件路由/组件

Question

UPDATE：，见下

所以我有一个应用程序，我有两个不同的组织，当用户正在使用的应用程序，因此我想加载根据不同的组件在其组织，他属于。

方法1： 做一个简单的条件在routes文件。

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的和在生产环境中运行应用程序只是给出了错误的组件。我已经尝试将日志输出添加到此用户route.ts文件中，日志在本地主机上按预期显示，但在生产中没有任何内容。 localStorage中的“用户”对象在两种情况下都存在并且是相同的。 注：这种做法也工作正常与角2，具有角4的东西，似乎在生产环境中运行时的路径文件发生，但谁知道..也许它以某种方式使如果条件的中断编译。

方法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

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

详细信息可在这里的角文档：https://angular.io/guide/dynamic-component-loader