2016-04-01 4 views
2

Я довольно новичок в Angular2, и я пытаюсь справиться с маршрутизацией и, в частности, с детской маршрутизацией.Angular2 Child Routes stopping page loading

Я основываю свое приложение на Angular2-seed project и пытаюсь настроить маршрутизацию. Мои маршруты инкапсулированы в функциональные модули, поскольку я ожидаю, что у меня будет много функциональных областей для моего приложения. Для краткости я пропустил импорт модулей, можно предположить, что они верны, поскольку приложение загружается.

app.component.ts

RouteConfig([ 
    { path: '/', component: HomeComponent, as: 'Home' }, 
    { path: '/area1/...', component: Area1Component, as: 'Area1' }, 
    { path: '/area2/...', component: Area2Component, as: 'Area2' }, 
]) 

area1.component.ts

@RouteConfig([ 
    { path: '/...', component: Area1Component, as: 'Area1' }, 
    { path: '/function1', component: Function1Component, as: 'Function1' }, 
]) 

area2.component.ts

@RouteConfig([ 
    { path: '/...', component: Area2Component, as: 'Area2' }, 
    { path: '/function2', component: Function2Component, as: 'Function2' }, 
]) 

мой навигации определяется следующим образом

<nav> 
    <a [routerLink]="['Home']">HOME</a> 
    <a [routerLink]="['Area1', 'Function1']">A NICE FUNCTION</a> 
    <a [routerLink]="['Area2', 'Function2']">ANOTHER NICE FUNCTION</a> 
</nav> 

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

+1

'как' осуждается, использование 'name' вместо этого. Какова цель маршрутов «/ ...»? Похоже, есть больше детских маршрутов, которые вы опустили в своем вопросе. Думаю, это нужно, чтобы воспроизвести Плункер? –

+0

@ GünterZöchbauer стыдно, как, я думаю, это более читаемо, чем имя. Что касается/... маршрутов, я думал, что они нужны для детской маршрутизации, непонимание примеров чтения. Я удалил их, и теперь маршрутизация работает отлично. Можете ли вы поместить свой комментарий в качестве ответа, и я буду отмечать его как ответ – ciantrius

ответ

0
  • as устарел, используйте вместо него имя.

  • /... В конце маршрута маршрут указывает маршрутизатору, что существует больше дочерних маршрутов. Без /... они являются терминальными маршрутами. Из кода в вашем вопросе, похоже, нет дальнейших маршрутов для детей, поэтому эти маршруты являются избыточными.

0

Если вы хотите использовать вложенные маршруты, которые вы можете использовать children свойство, как описано here:

{ 
    path: 'about', 
    component: AboutComponent, 
    children: [ 
     { path: '' }, 
     { path: 'contacts/:id', component: ContactsComponent }, 
    ] 
} 

и в шаблоне ContactsComponent, добавьте <router-outlet></router-outlet>