Как перейти к брату в Angular 4 с помощью относительной навигации? - PullRequest
Новая
       7

Как перейти к брату в Angular 4 с помощью относительной навигации?

0 голосов
/ 24 мая 2018

У меня проблема с навигацией по маршрутизатору с ленивой загрузкой.Буду признателен, если кто-нибудь прояснит вопросы ниже. Спасибо.

app-routing.module 

const routes: Routes = [
{ path: 'home', component: HomeComponent},
{ path: Details, loadChildren: 'pathToDetailsModule'}
];

details.module.ts 

const routes: Routes = [
{
  path: '', component : DetailsComponent,
   childern : [
    {path: '' , redirectTo: prodType},
    {path: prodType , loadChildren: pathtoModuleProd},
    {path: CusDetails, loadChildren: pathtoModuleCustomer},
    {path: EmpDetails, loadChildren: pathToModuleEmp}
   ]
},
];

Первоначально, когда янажмите Details (app-routing.module), DetailsModule получает загрузку и DetailsComponent и по умолчанию перенаправляет на prodType.На моей странице отображается ProdType (дочерний).Теперь я хочу перейти к CusDetails.

Проблемы:

# 1.

На данный момент 

currentRoute =  this.activatedRoute.snapshot.url[0].path

дает результат Details (родитель) вместо prodType (ребенок).Ленивый загруженный модуль добавляет пустой путь?Теперь я с ребенком - prodType и хочу перейти к ребенку - CusDetails).Насколько я знаю, чтобы загрузить родного брата CusDetails- 

this.router.navigate(['../CusDetails'],{relativeTo: this.route}); // expected

, но в моем случае я использую код ниже, чтобы загрузить родного брата, потому что currentRoute равен Details (parent). 

this.router.navigate(['CusDetails'], { relativeTo: this.route});

Почему currentRoute дает результат Details вместо prodType?Я был бы признателен за объяснение.

# 2.

Теперь скажите, что я нахожусь в CusDetail и хочу перейти к его EmpDetails, используя 

this.router.navigate(['../EmpDetails'],{relativeTo: this.route});

, и мы получим localhost:4200/Details/CusDetails/EmpDetails но если я использую приведенный ниже код, он работает нормально. 

this.router.navigate(['../../EmpDetails'],{relativeTo: this.route});

Почему он не работает с одним? 

'../'

Буду признателен за объяснение.

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

До Angular v6.x это известная проблема с 'относительным разрешением канала' в навигации маршрутизатора.

Неинтуитивный способ работы относительной навигации маршрутизатора - это ошибка,угловая команда в курсе.

Основная проблема заключается в том, что маршрутизация выполняется на основе дерева конфигурации маршрутизатора, а не на пути URL.Дерево конфигурации маршрутизации часто отличается из-за некомпонентных узлов и лениво загруженных модулей, которые добавляют дополнительные уровни при навигации (отсюда и дополнительные ../). (более подробное объяснение см. Здесь)

Эта ошибка на самом деле уже исправлена ​​(документы) в v6.1, но во избежание взлома всех приложений, которыеуже используя дополнительные ../, исправление находится за флагом функции. (см. Обсуждение PR здесь)

Чтобы включить исправленное поведение относительного разрешения линии связи, вам просто нужно установить для параметра relativeLinkResolution в ExtraOptions значение «исправлено»

то есть 

 RouterModule.forRoot(routes, { relativeLinkResolution: 'corrected' })

Исправление этого поведения представляет собой критическое изменение, поэтому исправленная настройка будет использоваться по умолчанию начиная с v7 (ожидается, что она будет выпущена в ближайшие недели - октябрь 2018 г.).

0 голосов
/ 24 мая 2018

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

. / Или нет начального слеша относительно текущего уровня.

.. /чтобы подняться на один уровень вверх по маршруту.

Вы можете комбинировать относительный синтаксис навигации с путем предка.Если вам нужно перейти к маршруту одного и того же уровня, вы можете использовать соглашение ../ для перехода на один уровень вверх, а затем вверх и вниз по маршруту одного и того же пути.

Для получения дополнительной информации просто пройдите по разделу относительной навигации в https://angular.io/guide/router

...