6

更新：以下を参照してください

したがって、ユーザーがアプリを使用しているときに、2 つの異なる組織を持つアプリがあるため、所属する組織に応じて異なるコンポーネントをロードしたいと考えています。

アプローチ 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 }
];

これは機能しますが、ローカルホストでのみ、heroku にプッシュして本番環境で実行すると、アプリが間違ったコンポーネントを提供します。この user-route.ts ファイルにログ出力を追加しようとしましたが、localhost では期待どおりにログが表示されますが、本番環境では何もありません。localStorage の「user」オブジェクトはどちらの場合にも存在し、同一です。 注:このアプローチは Angular 2 でも正常に機能していましたが、Angular 4 では、運用環境で実行しているときにルート ファイルで何かが発生しているように見えますが、何を知っているのか.. if 条件付きブレークを作成する何らかの方法でコンパイルされている可能性があります。

アプローチ 2. ルートとガードを使用します。別の組織に 2 つの警備員を追加します。動作しますが、ルートは異なる必要があります。最初の空のルートは常にチェックされますが、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:

機能していませんが、最も近いのは、名前付きルーターアウトレットを使用することでした。

右側のコンポーネントがロードされますが、上部の 2 つのルートに対してのみロードされます。空のパスを持つもの。私が得るidパラメータを持つ2つのルートについて

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>
4

2 に答える 2

0

動的コンポーネントローダーを試すことができます。

詳細はこちらの Angular ドキュメントにあります: https://angular.io/guide/dynamic-component-loader

于 2017-06-19T17:25:50.320 に答える