дочерняя маршрутизация в angular2 получает ошибку

Мой макет страницы выглядит так

-----------------------------------------------------
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

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 { }

снимок экрана: пользовательский интерфейс выглядит так, как ожидалось, но в окне консоли есть ошибка

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

Есть ли способ лучше?


angular angular2-router3
person user3799325    schedule 23.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Потому что у детей нет корневого пути. Когда путь Page1 загружается впервые, у него есть выход маршрутизатора, где он пытается загрузить дочерние маршруты, но с Page1 существует маршрут, настроенный с ''. Это потребуется при переходе по URL-адресу Page1. Если вы перешли к Page1/Page1Child1, он знает компонент, но Page1 (который должен быть сопоставлен с '') не существует

Так что просто добавьте перенаправление к дочернему маршруту по умолчанию

children: [
  { path: '', redirectTo: 'Page1Child', pathMatch: 'full' }
  { path: 'Page1Child1', component: Page1Child1Component}
]
person Paul Samsotha    schedule 23.10.2016
comment
core.umd.js: 3070 ИСКЛЮЧЕНИЕ: Не перехвачено (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: '' Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: '' в ApplyRedirects.noMatchError по-прежнему появляется ошибка, все еще не понимаю, почему мне нужно указывать пустой маршрут, я хочу отображать всех дочерних элементов для Page1, когда пользователь щелкает page1, и не хочу переходить к Page1Child1. переходите к нему только тогда, когда пользователь щелкает гиперссылку в отображаемом меню. - person user3799325; 23.10.2016
comment
Чтобы использовать children для Page1Component, вам потребуется маршрутизатор-выход в этом компоненте. Так работает children. И если у вас есть выход маршрутизатора в Page1Child1Component, тогда ему потребуется маршрут по умолчанию, когда вы перейдете в /Page. Если вы не хотите, чтобы Page1Child1Component имел собственный маршрутизатор-выход, не используйте children. Просто добавьте маршрут /Page1/Page1Child в корневую маршрутизацию, не используя children для маршрута Page1 - person Paul Samsotha; 23.10.2016
comment
У вас может быть компонент, который для пути '' (вместо перенаправления), если хотите, показывает всех дочерних элементов. - person Paul Samsotha; 23.10.2016