Проблема с выборкой параметров маршрута с использованием route.snapshot

#angular

Вопрос:

У меня есть маршрут с динамическим сегментом пути

 const route:Routes=[
{path:'customers',component:CustomerComponent}
{path:'customers/:id',component:CustomerComponent}
]

Итак, в моем клиентском компоненте я извлекаю это с помощью
идентификатор: число;

 constructor(private route:ActivatedRoute){}

ngOnInit(){

this.id= this.route.snapshot.params['id'];

console.log("Id is :",this.id)
}

Таким образом, консоль регистрирует «Id равен: 1», когда я иду по этому маршруту из другого компонента, или он работает должным образом, когда я иду по этому маршруту в первый раз «localhost: 4200 / customers / 1», Но проблема возникает. Я написал ссылку в
customers.html файл

 <a [routerLink]="['/customer',2]">loadID2</a>

При нажатии на эту ссылку URL-адрес меняется на «localhost: 4200 / customers / 2», но журнал консоли не работает, он не показывает «Id is: 2», там нет журнала консоли.
Моя проблема, почему это происходит?, URL-адрес уже изменился, но ngOnInit не работает. Не могли бы вы, пожалуйста, помочь мне решить эту проблему

Ответ №1:

Вместо того, чтобы использовать ActivatedRoute.snapshot для получения параметров маршрута, подпишитесь на ActivatedRoute.paramMap наблюдаемый, чтобы получить новый id :

 this.route.paramMap.subscribe((params : ParamMap)=> {  
      this.id =  params.get('id');
      console.log("Id is :", this.id);        
});

1. это должно быть params=>{this.id= params.get(‘id’); }); потому что id — это число , но console.log(«Идентификатор равен :», this.id ); все еще не работает, но когда привязка «id» к <p> id равна: {{id}}</p>, она меняется должным образом. Моя проблема в том, почему журнал консоли не работает, это angular не запускает ngOnint, когда маршрут такой же, или что происходит в их.

2. Я думаю, что вы пытаетесь console.log выйти за рамки subscribe вызова. Поскольку paramMap является наблюдаемым, вы увидите измененное значение только внутри subscribe обратного вызова. Внутри subscribe обратного вызова вы фактически реализуете Observer , у которого есть свой next метод, вызываемый при получении нового значения. Итак, если вы поместите console.log в ngOnInit вместо того, чтобы помещать внутри вызова subscribe, вы не увидите новое значение по мере его изменения.

3. Да, вы правы, мы должны поместить это в subscribe. Но у меня есть вопрос, почему angular ngOnint не запускается при изменении пути маршрута, теперь мой код работает должным образом, спасибо за это.

4. ngOnInit вызывается только один раз, когда компонент впервые подвергся обнаружению изменений, поэтому вы увидите console.log выходные данные только один раз. Но если вы добавите console.log внутри вызова subscribe, то при получении наблюдателем следующего элемента будет вызван ваш реализованный next метод, а также будет вызван ваш console.log (как вы добавили его при реализации next метода в subscribe обратном вызове).