Угловая 2 маршрутизирует детей с выходами

Question

В настоящее время вы пытаетесь узнать о маршрутизации с угловым 2, и я столкнулся с проблемой, которую не могу решить, похоже, что это какой-то синтаксис или конфиг, которых я просто не вижу.

Я хочу иметь две розетки маршрутизатора на одной странице и иметь возможность отображать на отдельной странице отдельные отдельные страницы, которые пользователь может осуществлять индивидуально.

Я попытался следующий код отсюда - http://onehungrymind.com/named-router-outlets-in-angular-2/

Однако, когда я делаю это я получаю ошибку о том, что не может найти маршрут, по которому ребенок маршруты на.

Вот код:

Маршруты

{ 
    path: 'full', 
    component: FullComponent, 
    children: [ 
     { 
      path: 'list', 
      component: ListComponent, 
      outlet: 'list' 
     } 
    ] 
} 

В полном компоненте:

<div divOne> 
    <router-outlet name="list"></router-outlet> 
</div> 
<div divTwo> 
    <router-outlet name="detail"></router-outlet> 
</div> 

И перемещаться так:

let navigationExtras: any = { 
     queryParams: { reference: 21 }, 
     outlets: {'list': ['list']} 
    }; 

    this.router.navigate(['full'], navigationExtras); 

Это дает мне следующее ошибка messa ge:

core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'full'

Если я выхожу из розетки из детского маршрута, я не получаю это сообщение об ошибке.

Может ли кто-нибудь указать, где я иду не так?

Answer 1

Компонент необходим ровно один неназванный маршрутизатор-выход и может иметь дополнительные именованные выходы

<router-outlet></router-outlet> 
<router-outlet name="full"></router-outlet> 

this.router.navigate(['full'], navigationExtras); 

Перемещение ([{выходов: {route3: 'productPage'}}]);

navigate() { 
    let navigationExtras: any = { 
     queryParams: { reference: 21 }, 
     outlets: {full: 'full']} 
    }; 
    this.router.navigate([navigationExtras]); 
    } 

Plunker example

Answer 2

Первый аргумент метода router.navigate должен быть ['/full'] вместо ['full'].

this.router.navigate(['/full'], navigationExtras);