子路由在angular2獲取錯誤

Question

我的頁面布局看起來像這樣

-----------------------------------------------------
HEADER MENU --> Page1  <Page2>
-----------------------------------------------------
Page1 Child1 |
Page1 Child2 |       MAIN CONTENT
Page1 Child2 |
----------------------------------------------------
          FOOTER
----------------------------------------------------

如果用戶點擊Page1我想刷新左邊的菜單列出Page1的子項，如果我點擊第2頁比我要刷新菜單列表並顯示第2頁的子項

這是我的路由器當前的樣子，但我收到了錯誤

core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''

錯誤：無法匹配任何路由。 URL Segment：''在ApplyRedirects.noMatchError

的index.html

 index.html <div class="container"> <div class="row"> </div> <div class="row"> <div class="col-md-2"><router-outlet></router-outlet></div> <div class="col-md-10"><router-outlet name="main"><h2>Main Content Here</h2></router-outlet></div> </div> </div> 

app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Page1Component } from './Page1/Page1.component';
import { Page1Child1Component } from './Page1/Page1Child1/Page1Child1.component';
import { Page2Component } from './Page2/Page2.component';
import { RouterModule } from '@angular/router';


@NgModule({
    imports: [BrowserModule,

            RouterModule.forRoot([
                { path: '', redirectTo: 'Page1', pathMatch: 'full' },
                {
                    path: 'Page1', component: Page1Component,
                    children: [
                        { path: '', redirectTo: 'Page1Child1', pathMatch: 'full' },
                        { path: 'Page1Child1', component: Page1Child1Component }
                    ]

                },
                { path: 'Page2', component: Page2Component }
            ])
        ],
    declarations: [AppComponent, Page1Component, Page2Component, Page1Child1Component],
    bootstrap: [AppComponent]
})
export class AppModule { }

截圖UI看起來如預期，但控制台窗口中有錯誤

core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'Page1Child1Component'
Error: Cannot find primary outlet to load 'Page1Child1Component'
    at getOutlet 

Page1.component

import { Component } from '@angular/core';
@Component({
    selector: 'Page1',
    template: `<h1>This is from Page1 </h1>
    <ul>
  <li *ngFor="let item of links; let i = index">
        <a [routerLink]="['Page1Child1']" routerLinkActive="active" outlet:"main">{{item}}</a>
  </li>
</ul>
   `
})
export class Page1Component {
    links: any[] = [
    'Page1 Child1',
    'Page1 Child2'
    ];

}

現在，只要我更新Pag1Component以使用命名出口，它就會拋出解析錯誤。

{{項目}}

這只是吹出整個頁面而沒有顯示任何內容，控制台窗口會拋出解析錯誤

錯誤：（SystemJS）模板解析錯誤：（...）（匿名函數）@（索引）：20ZoneDelegate.invoke @ zone.js：232Zone.run @ zone.js：114（匿名函數）@ zone.js：502ZoneDelegate.invokeTask @ zone.js：265Zone.runTask @ zone.js：154drainMicroTaskQueue @ zone.js：401ZoneTask.invoke @ zone.js：339

有沒有更好的方法來做到這一點

Answer 1

因為孩子們沒有根路徑。 當Page1路徑首次加載時，它有一個路由器插座，它嘗試加載子路由，但是Page1有一個配置了''的路由。 當您轉到Page1網址時，這將是必需的。 如果你去了Page1/Page1Child1 ，它知道組件，但是Page1 （需要映射到'' ）不存在

因此，只需將重定向添加到默認子路由即可

children: [
  { path: '', redirectTo: 'Page1Child', pathMatch: 'full' }
  { path: 'Page1Child1', component: Page1Child1Component}
]