Как читать данные, переданные в перенаправленном URL в компоненте angular

Question

Я новичок в angular 2+ и пытаюсь учиться.

У меня есть маршруты в угловых направлениях, такие как

const routes: Routes = [{path:"home",component:HomeComponent},                       
                        {path:"designer",component:DesignerComponent},
                        {path:"designer/:id",component:DesignerComponent}];

Как только я достигну DesignerComponent, используя путь designer/:id, я хочу получить значение «id». Как я могу это сделать? Я использую последнюю версию Angular.

Answer 1

Вы можете сделать это двумя способами, во-первых, это

constructor(private route: ActivatedRoute){
  this.userId=this.route.params.snapshot['id']
}

Другим способом, которым вы можете подписаться на такие параметры, как

constructor(private route: ActivatedRoute){
      this.route.params.subscribe(data=>this.userId=data['id']
 })
    }

Используйте второй подход, если ваш параметр может измениться, пока выв том же корне

Answer 2

Вам нужно добавить ActivatedRoute и внутри будет иметь snapshot.paramMap вы получите параметр, который вы передали.

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

private userId = '';
constructor(private route: ActivatedRoute){

}

ngOnInit() {
   this.userId = this.route.snapshot.paramMap.get('id');
}

ИЛИ

Свойство ActivatedRoute.paramMap является наблюдаемой картой параметров маршрута. ParamMap испускает новую карту значений, которая включает идентификатор, когда пользователь переходит к компоненту. В ngOnInit вы подписываетесь на эти значения и устанавливаете идентификатор.

ngOnInit() {
  this.route.paramMap.pipe(
   switchMap(params => {
     // (+) before `params.get()` turns the string into a number
     this.userId = +params.get('id');
   })
 );
}

Answer 3

Лучше подписаться на маршрут, поэтому вы получите значения каждый раз, когда меняется /:id.

Добавьте этот код в конструктор класса DesignerComponent:

constructor(private route: ActivatedRoute){
    this.route.params.subscribe(data => this.userId = data['id'])
});