登錄後路由問題

Question

我正在構建angular2應用程序，目前我有一個主菜單和主菜單的菜單欄和路由器插座。我添加了登錄機制，因此如果用戶未通過身份驗證，則登錄頁面將顯示在整個屏幕中，登錄後用戶將被路由到具有上述結構的主/家庭組件。

當我運行應用程序的登錄頁面加載，併成功通過身份驗證，它將我路由到主頁，但在加載菜單的主頁（如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)

我在2個地方的路由器出口標籤在AppLoader將以及在其中實際菜單在加載LayoutMenu部件，即1和其包含的路由器出口加載那裏的主要內容。

什麼是正確的地方有路由器插座？我在哪裏做錯了？

下面是用於routeconfig代碼

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經由自舉的main.ts被注入。在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路由配置：

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財產。更多關於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在github上。