web-dev-qa-db-ja.com

Angular 2、別のルーターアウトレット内のRC5ルーターアウトレット

別のルーターアウトレット内に1つのルーターアウトレットがある1つのプロジェクトを作成しようとしています。

次のように機能します。

最初のルーターアウトレットには、2つのビューがあります。

  • authコンポーネント（/ login）

  • 管理コンポーネント（/ admin）

次に、2番目のアウトレットで、これらをレンダリングする独自のルートを持つadminコンポーネント内にあります。

  • ダッシュボード（/ admin）

  • プロファイル（/ admin/profile）

  • ユーザー（/ admin/users）

ここで、Angular 2のドキュメントでは、モジュールを使用してこの実装を行っていることがわかります。しかし、複数のモジュールを使用する必要はありません（または必要ですか？）。

モジュールを分離せずにこの実装を行う方法はありますか？

管理領域のデフォルトコンポーネントが必要なため、たとえば2番目のルーターアウトレットが必要でした。たとえば、ダッシュボードにはHeaderComponent、LeftNavComponent、およびDashboardCompoentがあります。ただし、プロファイルページにはこれらすべてのHeaderComponentとLeftNavComponentもあり、変更されるのはProfileComponentのみであるため、基本的に同じ構造になります。さまざまな管理ページごとにすべてのインポートを繰り返す必要はないと思います。現在のルートに基づいた動的なコンテンツを持つメイン管理コンポーネントを1つだけ用意したかったのです。

私はすでに多くのことをインターネットで試し、検索しましたが、見つけることができる唯一の例は公式のAngular 2ドキュメントからです。しかし、彼らはこれを複数のモジュールで実装しています。

angularroutingangular2-routing
21
Thiago Yoithi

モジュールをお勧めしますが、ルートナビゲーションではオプションです。

モジュールなしで以下のようなルーティングを設定できます。

app.routing

import { Routes, RouterModule }   from '@angular/router';

      import { DashboardComponent, 
         AdminComponent,
         ProfileComponent,
         UsersComponent
      } from './app.component';

      const appRoutes: Routes = [
      {
        path: '',
        redirectTo: '/dashboard/admin/users',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        children:[
        {
         path : 'admin',
         component: AdminComponent,
         children:[
           {
            path : 'users',
            component: UsersComponent
           },
           {
            path : 'profile',
            component: ProfileComponent
           }
         ]
        }
       ]
     }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

コンポーネント

import { Component }          from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h3 class="title">Routing Deep dive</h3>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}


@Component({
  template: `
    <h3 class="title">Dashboard</h3>
    <nav>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class DashboardComponent {
}

@Component({
  template: `
    <h3 class="title">Admin</h3>
    <nav>
      <a routerLink="users" routerLinkActive="active" >Users</a>
      <a routerLink="profile" routerLinkActive="active" >Profile</a>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AdminComponent {
}

@Component({
  template: `
    <h3 class="title">Profile</h3>
  `
})
export class ProfileComponent {
}

@Component({
  template: `
    <h3 class="title">Users</h3>
    <hr />
  `
})
export class UsersComponent {
}

Plunker !!

お役に立てれば！！

27
Madhu Ranjan

遅延読み込みモジュールを使用したソリューションの追加。これは、元の質問の本文ではなく、タイトルによる一般的な回答です。

UserCheckinModuleとLoginのページ/コンポーネントを含むログインしていないユーザー用にSignupという名前の個別のモジュールを作成しました。これらは通常、共通の設計と機能/サービスを共有するためです。

app.routing.module.ts-で定義されているルート

const routes: Routes = [
  { path: 'user', loadChildren: './user-checkin/user-checkin.module#UserCheckinModule' },
  { path: '**', redirectTo: 'user' }
];

UserCheckinモジュールのser-checkin.-routing.module.tsで定義されているルート-

const routes: Routes = [
  {
    path: '',
    component: CheckinComponent, // base template component
    children: [
      { path: '', redirectTo: 'login' },
      { path: 'login', component: LoginComponent },
      { path: 'signup', component: SignupComponent },
      { path: '**', redirectTo: 'login' }
    ]
  }
];

app.component.htmlは既にrouter-outletそして、アプリ全体の基本テンプレート/レイアウトとして動作します。 UserCheckinModuleは子モジュールであり、独自のルートとベーステンプレートがあります。

checkin.component.html基本テンプレートのコンテンツ-

<router-outlet></router-outlet>
1
Sujit Kumar Singh