2016-11-22 6 views
6

Я пытаюсь Угловая 2 Маршрутизация.Угловые 2 вложенных представления без AUX URL

Мое приложение имеет 4 страницы и 4 маршрута (r1, r2, r3, r4). Я хочу разделить две группы этих страниц. Поле «content 1» для r1 и r2 будет таким же. Для r3 и r4 поле «Содержание 1» будет таким же, и поле «Содержание 2» изменится для каждого маршрута.

Я могу сделать это, вызвав компонент в шаблоне, но поле «Содержание 1» перекомпилируется.

Я не хочу использовать маршрутизацию AUX. URL выглядит уродливым.

Я мог бы сделать это раньше в Angular 1. Как я могу это сделать в Angular 2?

example image

ответ

0

Вы могли бы создать что-то вроде этого, делая содержание каждого блока отдельный компонент и в вашем App маршрута место следующее:

<header></header> 
<content-1></content-1> 
<router-outlet></router-outlet> 
<footer></footer> 

Теперь необходимо настроить маршрутизатор, который он показывает правильные данные content 2 для конкретного маршрута. Компоненты также могут связываться, поэтому вы должны передавать соответствующие данные в компонент content-1 (см. Component interaction в Угловых документах).

+0

«Содержание 1» должно быть в переменной структуре. R1 и r2 должны быть «

»

', а r3 и r4 должны быть«
»
'. Поэтому я должен записать его в розетку. Я могу сделать это с помощью маршрутизации AUX, но, как я писал выше, URL-адрес выглядит очень уродливым. – sqlProvider

0

Похоже, что угловой 2 маршрутизатора по умолчанию не действительно поддерживает несколько именованных видов. Эта странная функция маршрутизации AUX (названная выходы) может быть полезна в некоторых редких случаях (всплывающие окна, динамические области и т. Д.), Но она абсолютно непригодна для классических шаблонов master-child с несколькими заполнителями.

Радикальное решение может быть переключено на ui-router for angular-2 вместо стандартного.

1

Вы можете добиться этого, указав маршрутизатор-выход следующим образом.

Предполагая, что вы сначала загружаются appComponent,

app.component.html

<header></header> 
<router-outlet name='content1_r1_r2'><router-outlet/> 
<router-outlet name='content1_r3_r4'><router-outlet/> 
<router-outlet name='content2'><router-outlet/> 
<footer></footer> 

настроить маршрутизатор следующим образом:

{ 
    path: 'r1', 
    component: 'appComponent', 
    children: [ 
     { path: '', component: contentr12Component, outlet: 'content1_r1_r2' }, 
     { path: '', component: contentr1Component, outlet: 'content2' } 
    ] 
} 
// write same for r2 just change content1Component you want to load on /r2 route. 

{ 
    path: 'r3', 
    component: 'appComponent', 
    children: [ 
     { path: '', component: contentr34Component, outlet: 'content1_r2_r4' }, 
     { path: '', component: contentr3Component, outlet: 'content2' } 
    ] 
} 

// write same for r4 just change content3Component you want to load on /r4 route. 

В приведенном выше коде contentr12Component будет оставаться таким же для маршрутов r1 и r2, contentr34Component останется таким же для r3 и r4. вы можете заменить имена в соответствии с вашим компонентом.

Это позволит избежать уродливого URL-адреса.

Смежные вопросы