web-dev-qa-db-ja.com

Angular 2フィーチャモジュールルーティングの例

Angular 2ルーティングに関しては、アプリケーション全体に対して1つのルーティングファイルが存在するシナリオの例をほとんど見つけることができました。

1つのルーティングファイルだけでなく、メインルーティングファイルを使用してから、少なくとも1つのフィーチャモジュールルーティングファイルを使用する例をご覧ください。

Edit： やや似たような質問 がすでに質問され、回答されていることに気付きました。特に役立つと思われない理由が2つあります。

1）質問はそのユーザーの状況に非常に固有のものであるため、多くの「ノイズ」があります。私が求めているのは、フィーチャモジュールルーティングの1つの孤立した例です。

2）その質問に対する答えは、機能モジュールのルーティングファイルを作成し、それをアプリのメインルーティングに結び付ける方法を扱っていないようです。たぶんそれはそこにあり、私はちょうどそれを見逃していますが、そこには見えません。

angularrouting
24
Jason Swett

この例が探しているものをカバーしているかどうかを見てみましょう。

使用されているモジュールは次のとおりです。

  • AppModule（ルートモジュール）
  • UsersModule（機能モジュール）

以下のスニペットは簡略化されています。

app.module.ts

import { UsersModule } from './users.module';
import { AppRouting } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    UsersModule,
    AppRouting,
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.routing.ts

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: Home },
  { path: '**', component: NotFound }, //always last
];

export const AppRouting = RouterModule.forRoot(appRoutes, { 
  useHash: true
});

users.module.ts

import { NgModule } from '@angular/core';
import { UsersRouting } from './users.routing';

@NgModule({
  imports: [
    CommonModule, // ngFor, ngIf directives
    UsersRouting,
  ],
  declarations: [...],
  providers: [...]
})
export class UsersModule { }

users.routing

const usersRoutes: Routes = [
  { path: 'users',
    children: [
      { path: '', component: Users },
      { path: ':id', component: User }
    ]
  }
];

export const UsersRouting = RouterModule.forChild(usersRoutes);

プランカー： http://plnkr.co/edit/09Alm0o4fV3bqBPUIFkz?p=preview

サンプルコードにはAboutModule（遅延ロードモジュール、解決例を含む）も含まれていますが、共有モジュールの例は含まれていません。

これらのスライドで詳細を見つけることができます： https://slides.com/gerardsans/ngpoland-amazing-ng2-router

47
Gerard Sans

子ルートでルーティングを処理する方法の例を次に示します。これはあなたを助け、あなたのコンポーネントのいくつかにGuardを提供するために子ルートを使用することを教えると思います。これにより、ユーザーが認証を受けていない場合に一部のビューが保護されます。私はpublicとsecureで私のものを分離し、レイアウト全体をルーティングし、レイアウトが選択されているルートをロードします。

必ず子ルートをエクスポートし、レイアウトルートで正しいルートが呼び出されるようにしてください。また、各子ルートファイルでredirectToを使用していることを確認してください。

レイアウトをパブリックまたはセキュアに定義しています。次に、これらの各ディレクトリにrouteファイルを提供して、作成ルートが選択されると引き継ぎます。

app.routing.ts

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

次に、レイアウトフォルダがあります

レイアウト

layouts/public/public.components.ts
layouts/public/public.components.html
layouts/secure/secure.components.ts
layouts/secure/secure.components.html

レイアウトであるsecure.component.tsは次のようになります。

import { Component, OnInit }        from '@angular/core';
import { Router }                   from '@angular/router';
import { Auth }                     from './../services/auth.service';

@Component({
    providers: [ Auth ],
    selector: 'app-dashboard',
    templateUrl: './secure.component.html'
})
export class SecureComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

次に、安全なディレクトリでコンポーネントを作成し、使用するテンプレートを選択します。

@Component({
    providers: [ Auth ],
    templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit {

    constructor( private router: Router, private auth: Auth, private http: Http  ) { }

    ngOnInit() { }
}

ここで、安全でパブリックなディレクトリに子ルートを作成してください。ルートがヒットすると、子ルートは正しいクラスをロードし、テンプレートファイルがレンダリングされます。

レイアウトの子になることを忘れないでください。したがって、secure.component.htmlにナビゲーションバーとフッターを配置すると、すべてのセキュアコンポーネントに表示されます。セレクターを使用してコンテンツを読み込むためです。セキュアでパブリックなすべてのコンポーネントは、レイアウトhtmlファイル内のselctoryにロードされます。

子ルート/ public/piublic.routes.ts

export const PUBLIC_ROUTES: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'p404', component: p404Component },
    { path: 'e500', component: e500Component },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'home', component: HomeComponent }
];

/ secure/secure.routes.ts

export const SECURE_ROUTES: Routes = [
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'items', component: ItemsComponent },
    { path: 'overview', component: OverviewComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'reports', component: ReportsComponent }
];

概要

Angular2アプリのルートディレクトリに初期のroutファイルをセットアップしました。このルートファイルは、ユーザーが認証されているかどうかに応じて、2つのレイアウトのいずれかにトラフィックを誘導します。パブリックレイアウトまたはセキュアレイアウトが提供されているルートのいずれかで認証されている場合。次に、これらのレイアウトのそれぞれには、それぞれのレイアウトに提供される子ルートとコンポーネントの束があります。

したがって、ファイル構造をクリアするには、

root = /

表示するレイアウトを制御するメインアプリルート。

/app.routing.ts

レイアウトをセキュアまたはパブリックに保持するレイアウト。

公開

`/layouts/public.components.ts
/layouts/public.components.html
/layouts/public.routing.ts`

セキュア

`/layouts/secure.components.ts
/layouts/secure.components.html
/layouts/secure.routing.ts`

認証なしで表示できるすべてのものを保持するパブリックディレクトリ。

/public/home-component.ts
/public/home-component.html

認証が必要なルートとコンポーネントを保持する安全なディレクトリ。

/public/profile-component.ts
/public/profile-component.html
2
wuno