角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