Угловые 6 вложенных дочерних маршрутов не отображают вид - PullRequest
Новая
       21

Угловые 6 вложенных дочерних маршрутов не отображают вид

0 голосов
/ 23 ноября 2018

Я застрял в месте, где работает навигация, но представление не работает, в основном один компонент сопоставлен с двумя разными маршрутами:

Компонент равен example.component.ts

Маршруты являются

http://localhost:4200/manager/nav/example

http://localhost:4200/nav/valuation

Имеют два разных модуля и имеют свои собственныеопределены маршруты

Механизм навигации: когда пользователь нажимает manager , он загружает свой собственный компонент, а затем пользователь может перейти к manager> nav и от nav пользователь может перейти к менеджеру>nav> пример

manager.routing.ts 

{ path: 'manager', component: ManagerComponent , children:[
 { path: '', component: PortfolioManagerComponent },
 { path: 'nav', component: NavComponent},children: [
  { path: 'example', component: component:ExampleComponent}

] }

]}

http://localhost:4200/manager/nav enter image description here

http://localhost:4200/manager/nav/example Issue view not change

Маршрут изменен, но представление не отображается в основном на представлении менеджера, а не на примере представления

Но когда я использую маршрут nav и затем нажимаю пример, он загружает исходную страницу, а nav имеет свой собственный модуль и маршрутизацию

nav.routing.ts 

  { path: 'nav', component: NavComponent, children: [
  { path: '', component: PropertyComponent},
  { path: 'example, ', component:ExampleComponent}
 ]

Отображение правого вида

enter image description here

enter image description here

Когдая использую маршрут http://localhost:4200/manager/nav/example до http://localhost:4200/manager/nav вид меняется, и когда я перемещаюсь к http://localhost:4200/manager/nav/example, остается тот же вид, он не загружает вид, но меняется маршрут

Вы можете увидеть первые два изображения для просмотра маршрута и последние два изображения для правильного просмотра

1 Ответ

0 голосов
/ 23 ноября 2018

Я считаю, что ваша проблема в том, что вы используете стандартную стратегию поиска путей Angular, которая является префиксом .Это означает, что Angular будет использовать первый маршрут, который он найдет в модуле вашего маршрутизатора, который начинается с указанного сегмента вашего маршрута.И пустой путь - особый случай, поскольку все пути начинаются с пустого пути.Таким образом, в этом примере nav и пример оба начинаются с пустого пути, и Angular перейдет к компоненту, который связан с пустым путем и который является PortfolioManagerComponent. 

{ path: 'manager', component: ManagerComponent , children:[
 { path: '', component: PortfolioManagerComponent },
 { path: 'nav', component: NavComponent},children: [
  { path: 'example', component: component:ExampleComponent}

] }

Вам нужно изменить стратегию сопоставления на full , добавив атрибут pathMatch к своему маршруту: 

{ path: 'manager', component: ManagerComponent , children:[
    { path: '', pathMatch: 'full', component: PortfolioManagerComponent },
    { path: 'nav', component: NavComponent},children: [
    { path: 'example', component: component:ExampleComponent}

    ] }

Дополнительная информация в документации:https://angular.io/api/router/Routes#matching-strategy

...