Как получить доступ к параметрам URL из любого компонента Angular? - PullRequest
Новая
       17

Как получить доступ к параметрам URL из любого компонента Angular?

0 голосов
/ 05 июля 2018

У меня есть приложение, компоненты которого имеют следующую структуру: 

1. Fam.Component
1.1. Header.Component <------ Unable access param from here
1.2. ParentGrid.Component
1.2.1. ChildGrid.Component
1.2.1.1 GrandChildGrid.Component <----- Can access from here!!

При нажатии на элемент в родительской сетке будет загружена дочерняя сетка, относящаяся к этому элементу.

На уровне потомков URL моего браузера выглядит примерно так: 

http://onebigfamily.com/Fam/Parents/1/Children/23/GrandChildren

это в основном покажет всех внуков 23-го ребенка 1-го родителя.

путь для этого URL в моей конфигурации маршрутизации выглядит следующим образом: 

Fam/Parents/:parentId/Children/childId:/GrandChildren

Я могу получить доступ к значениям параметров childId и parentId, перемещаясь по ActivatedRoute из моего GrandChildren компонента, выполнив простой this.route.snapshot.params['childId'] (конечно, для родительского идентификатора необходимо пройти по дереву маршрутов).

Теперь к вопросу ...

Как получить доступ к :childId и :parentId из моего компонента заголовка? эти значения отображаются как неопределенные, когда я делаю this.route.snapshot.params['childId']?

Мне просто нужно получить доступ к родительскому идентификатору и дочернему идентификатору, если они находятся в URL-адресе, независимо от того, какой компонент имеет элемент управления.

Ответы [ 3 ]

0 голосов
/ 06 июля 2018

Вы можете получить параметры URL в переменной маршрута 

this.route.params.subscribe(params => {
                var parentId = params['parentId'];
                var childId = params['childId'];
 });
0 голосов
/ 09 октября 2018

Вы можете получить доступ к дочернему маршруту через firstChild, поэтому (в зависимости от конфигурации вашего маршрута) это может выглядеть так:

this.route.snapshot.firstChild.firstChild.params['childId']

0 голосов
/ 06 июля 2018

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

  this.route.paramMap
    .subscribe(params => {
         //assign params here
    });

где route вводится ActivatedRoute из документов

params - Observable, который содержит обязательные и дополнительные параметры, специфичные для маршрута. Вместо этого используйте paramMap.

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

...