1

我的页面布局看起来像这样

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

如果用户单击第 1 页我想刷新左侧的菜单以列出第 1 页的子项，如果我单击第 2 页而不是我想刷新菜单列表并显示第 2 页的子项

这是我的路由器目前的外观，但我收到错误消息

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

错误：无法匹配任何路由。URL 段：“”在 ApplyRedirects.noMatchError

索引.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

有没有更好的方法来做到这一点

4

1 回答 1

0

因为孩子们没有根路径。当Page1路径第一次加载时，它有一个路由器出口，它尝试加载子路由，但Page1有一个配置了''. 当您转到Page1url 时，这将是必需的。如果你去Page1/Page1Child1，它知道组件，但是Page1（需要映射到''）不存在

所以只需将重定向添加到默认子路由

children: [
  { path: '', redirectTo: 'Page1Child', pathMatch: 'full' }
  { path: 'Page1Child1', component: Page1Child1Component}
]
于 2016-10-23T03:43:11.160 回答