Angular Router - как найти маршрут к родительскому компоненту - PullRequest
Новая
       21

Angular Router - как найти маршрут к родительскому компоненту

0 голосов
/ 16 сентября 2018

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

module1Routes=  [
       {path: 'parent1': component: ParentComponent : children:[
           {path: 'child': component: ChildComponent},
           {path: 'result': component: ResultComponent}
       ]}
]

module2Routes=  [
       {path: 'parent2': component: Parent2Component : children:[
           {path: 'child': component: ChildComponent},
           {path: 'result': component: ResultComponent}
       ]}
]

Теперь ситуация выглядит следующим образом.У меня есть 2 модуля, и в конце обработки ChildComponent я хочу перейти к ResultComponent.

Вопрос в том, как узнать правильный путь к ResultComponent?

Если пользователь находится в пути parent1/child Я хочу, чтобы следующий шаг был parent1/result, но когда пользователь включен parent2/child, следующий шаг должен быть parent2/result.

В моем ChildComponent У меня есть метод goToResult(), ответственность за который лежит на ***/result.Я запутался, как узнать, что находится в ***?

Итак, вопрос в том, как узнать (в ChildComponent), каков реальный маршрут для родителя для этого ребенка?

I 'м застрял.Я пытался построить путь к родителю без дочернего фрагмента, но это не сработало.Есть идеи?

Я знаю, что могу использовать ключевое слово relativeTo в конфигурации router.navigate().Проблема в том, что я хочу вызвать router.navigate() в каком-либо сервисе, поэтому мне нужно передать им путь для навигации

1 Ответ

0 голосов
/ 16 сентября 2018

Вы можете добавить Маршрутизатор к своему Компоненту и удалить дочернюю строку из текущего URL.

Вариант A) Манипулятор Router + String (component.ts) 

constructor(private router: Router, private yourService: YourService) {

}

goToResult() {
   const path = this.router.url.replace('/child', '');
   this.yourService.goTo(path);
}

Вы можете настроить функцию замены, если дочерний объект может иметь несколько вхождений или вам необходимо удалить параметры запроса.

Вариант B) ActivatedRoute (component.ts) 

private parentUrl: string;

constructor(private activatedRoute: ActivatedRoute, private yourService: YourService) {
    this.activatedRoute.parent.url.subscribe(path => {
        this.parentUrl = `/${path.join('/')}`;
    });
}

goToResult() {
   this.yourService.goTo(this.parentUrl);
}
...