Извлечь идентификатор из url с помощью Angular2

Привет, я пытаюсь извлечь идентификационную часть URL-адреса с помощью Angular2.

http://localhost:3000/item/187809

Я играл с ActiveRoute внутри onInit, но без удачи

 this.route.queryParams.forEach((params: any) => {
   console.log("QUERYPARAMS");
   console.log(params);
 });

Также попытался подписаться на изменение маршрута следующим образом

this.routeSub = this.route.queryParams.subscribe(params => {
   console.log(params);
   console.log(+params['id']);
});

но params - просто пустой объект.

Я определяю маршрут как ленивый маршрут, подобный этому

{
path: item',
children: [
  { path: ':id', loadChildren: './item/item.module#ItemModule' },
]
},

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

Любая идея, что не хватает?

Ответы

Ответ 1

Подписка и отмена подписки на параметры маршрута

1) Убедитесь, что вы настроили маршрут, который ожидает такой параметр:

  {path: 'item/:id', component: SomeItemComponent}

2) Объявите переменную для вашей подписки на маршрут. Импортируйте ActivatedRoute (не ActiveRoute) и вставьте его в конструктор компонента.

  private routeSub: Subscription;
  constructor(private route: ActivatedRoute) { }

3) Внутри ngOnInit в том же компоненте вы можете получить доступ к данным в наблюдаемых params, подписавшись на них следующим образом:

  ngOnInit() {
    this.routeSub = this.route.params.subscribe(params => {
      console.log(params) //log the entire params object
      console.log(params['id']) //log the value of id
    });
  }

4) Внутри ngOnDestroy отпишитесь, чтобы предотвратить утечки памяти.

  ngOnDestroy() {
    this.routeSub.unsubscribe();
  }

Ответ 2

Я знаю, что немного опоздал с ответом, но на случай, если у вас все еще есть проблема, пожалуйста, посмотрите документацию Angular.

учебник по угловой маршрутизации

Посмотрите на пример по ссылке.

Начните с импорта ActivatedRoute:

import { ActivatedRoute } from '@angular/router';

Затем введите его в конструктор

constructor(private route: ActivatedRoute) {}

И в OnInit()

ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
}

и как это вам не нужно беспокоиться о каких-либо Observables напрямую.

Надеюсь, это поможет вам.

Ответ 3

Я подозреваю, что проблема заключается в том, что вы используете queryParams вместо params.

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

queryParams: Наблюдаемый, содержащий параметры запроса , доступные для всех маршрутов.

попробуйте следующее:

this.route.params.subscribe(params => {
   console.log(params);
   console.log(+params['id']);
});

Ответ 4

this.routeSub = this.route.params.subscribe(params => {
   console.log(params);
   console.log(+params['id']);
});