ログイン後のルーティングの問題

Question

私はangle2 appを構築していますが、現在はメインコンテンツのメニューバーとルータコンセントを備えたホームコンポーネントがあります。私はログインメカニズムを追加しました。そのため、ユーザーが認証されていない場合、ログインページが画面全体に表示され、ログイン後、上記の構造を持つメイン/ホームコンポーネントにルーティングされます。

私はアプリケーションを実行するとログインページが読み込まれ、正常に認証されると私はホームページにルーティングされますが、メニューがロードされるホームページ（Dashboard1、Dashboard2、Report1など）ではリンク正しく動作していません。いずれかのメニューバーのリンクをクリックすると、以下のエラーが表示されます。

lib/@angular/platform-browser/bundles/platform-browser.umd.js:1900 Error: Uncaught (in promise): Error: Cannot match any routes: 'Report1' 
 
     at resolvePromise (zone.js:538) 
 
     at zone.js:515 
 
     at ZoneDelegate.invoke (zone.js:323) 
 
     at Object.onInvoke (lib/@angular/core/bundles/core.umd.js:9100) 
 
     at ZoneDelegate.invoke (zone.js:322) 
 
     at Zone.run (zone.js:216) 
 
     at zone.js:571 
 
     at ZoneDelegate.invokeTask (zone.js:356) 
 
     at Object.onInvokeTask (lib/@angular/core/bundles/core.umd.js:9091) 
 
     at ZoneDelegate.invokeTask (zone.js:355)

Iは、2ヶ所のルータ出口タグはAppLoaderをで、また実際メニューがロードされており、それがロードするルータ出口を含んLayoutMenu成分1、すなわち有しますそこのメインコンテンツです。

ルーターアウトレットを設置する正しい場所は何ですか？どこで私は間違いをしていますか？

次のブートストラップmain.tsを介して注入され

export const routes: RouterConfig = [ 
    { path: '', component: Login }, 
    { path: 'login', component: Login }, 
    { path: 'Home', component: Home }, 
    { path: '**', component: Login } 
]; 
export const LOGIN_ROUTER_PROVIDERS = [ 
    provideRouter(routes) 
]; 

ホーム/メニューrouteconfigが

export const routes: RouterConfig = [ 
    { 
     path: 'home', 
     component: Home, 
     // canActivate: [AuthenticationGuard], 
     children: [ 

      { path: 'Dashboard1', component: Dashboard1 }, 
      { path: 'Dashboard2', component: Dashboard2 }, 
      { path: 'Report1', component: Report1 }, 
      { path: 'Report2', component: Report1 }, 

      { 
       path: 'ManageRedisCache', 
       component: ManageRedisCache, 
       children: [ 
        { path: '', component: ExtractorQueue }, 
        { path: 'Extractor', component: Extractor }, 
        { path: 'Schedule', component: Schedule }, 
        { path: 'CacheVisualization', component: CacheVisualization } 
       ] 
      } 
     ] 
    } 
]; 

export const HOME_ROUTER_PROVIDERS = [ 
    provideRouter(routes) 
]; 

上記2 routeconfig以下の通りであるrouteconfigするためのコードです。 main.tsのブートストラップでは、私もAppLoaderを注入します。

AppLoaderコンポーネントは、ログインページを含む/ロードする以下のとおりです。

@Component({ 
    selector: 'my-app', 
    template: `<router-outlet></router-outlet>`, 
    directives: [Login, ROUTER_DIRECTIVES ] 
}) 
export class AppLoader { 
} 

LayoutMenuコンポーネントは以下の通りです：

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
@Component({ 
    selector: 'MenuLayout', 
    template: ` 
     <a [routerLink]="['/Dashboard1']"><h4>Dashboards 1</h4></a> 
     <a [routerLink]="['/Dashboard2']"><h4>Dashboards 2</h4></a> 
     <a [routerLink]="['/Report1']"><h4>Reports 1</h4></a> 
     <div class="outer-outlet"> 
     <router-outlet></router-outlet> 
     </div> `, 
    directives: [LeftMenu, ROUTER_DIRECTIVES] 
}) 
export class LayoutMenu { } 

Answer 1

角度ルータを使用して、異なる構成を有する同一の結果を達成できることを十分に柔軟です。ベローが一例です。

1. ログインテンプレート
2. コンテンツテンプレート（左メニュー/右ワークスペース）

サンプルメインapp.componentルートの設定：

は、次の2つの異なる基本テンプレートをしたいです

export const routes: RouterConfig = 
[ 
    ...ContentRoutes, 
    { 
     path: 'login', 
     component: LoginComponent 
    }, 
{ 
     path: '', 
     redirectTo: '/home', 
     pathMatch: 'full' 
    }, 
    { 
     path: '**', 
     redirectTo: '/404', 
     pathMatch: 'full' 
    } 
]; 

今すぐのcontent.componentルート（左のメニュー/右のワークスペースを持つページ）：

export const ContentRoutes: RouterConfig = [ 
    { 
     path: 'home', 
     component: ContentComponent, 
     canActivate: [AuthenticationGuard], 
     children: [ 
      { 
       path: '', 
       component: MainHomeComponent, 
       canActivate: [AuthenticationGuard] 
      } 
     ] 
    }, 
    { 
     path: '404', 
     component: ContentComponent, 
     canActivate: [AuthenticationGuard], 
     children: [ 
      { 
       path: '', 
       component: PageNotFoundComponent, 
       canActivate: [AuthenticationGuard] 
      }, 
     ] 
    }, 
    { 
     path: '500', 
     component: ContentComponent, 
     canActivate: [AuthenticationGuard], 
     children: [ 
      { 
       path: '', 
       component: PageErrorComponent, 
       canActivate: [AuthenticationGuard] 
      }, 
     ] 
    }, 
]; 

すべてcontent.componentルートはルーティングする前にAuthenticationGuardを通過しなければならない、なぜcanActivateプロパティのthats。 angular router docsの詳細

私は404/500ルートの例も追加しました。

---

テンプレートをオンにします。ベースapp.componentテンプレートはRouterOutletを持っています：

<router-outlet></router-outlet> 

それは（ユーザ認証に応じて）login.componentまたはcontent.componentのいずれかにルーティングする必要があります。

content.componentそれがベースのレイアウトコンポーネントとRouterOutletの両方を持っている必要がありますので、あなたの "左のメニューおよびワークスペース" テンプレートです：

<div id="wrapper"> 
    <div id="page-wrapper" class="gray-bg"> 
     <div class="left-menu"> 
      <app-menu></app-menu> 
     </div> 
     <router-outlet></router-outlet> 
     <app-footer></app-footer> 
    </div> 
</div> 

（サンプルHTML）

要約：

ベースパス（ '/'）は '/ home'にリダイレクトされ、デフォルトはです。MainHomeComponentはContentComponentを親として有する。自由に子供のルートを追加してください。

Sample project on github。