Доступ к параметрам URL в Angular: снимок или подписка

Если вы читаете это, вы могли спросить себя, как лучше всего получить доступ к параметрам URL в Angular.

Не волнуйтесь, мы все были там, поэтому я постараюсь не тратить время на это. Время - деньги, правда? (… Мудрый человек, я знаю ✌)

Во-первых, мы должны импортировать объект ActivatedRoute и внедрить его в наш компонент, чтобы получить нужные нам параметры.

import { ActivatedRoute } from "@angular/router";
constructor(private route: ActivatedRoute) { }

Есть 2 способа получить доступ к параметрам. Первый использует route.snapshot.paramMap, а второй - route.paramMap.subscribe.

1. Когда использовать route.snapshot.paramMap?

Если вы намерены не обновлять параметр URL в том же компоненте, к которому вы обращаетесь, то можете использовать снимок.

Как следует из названия, параметр будет доступен только один раз при загрузке компонента. Следовательно, он не будет обновлен, даже если вы измените его значение в том же компоненте.

ngOnInit() {
  this.car = this.route.snapshot.paramMap.get("carBrand")
}

Не стесняйтесь визуализировать это на следующем примере StackBlitz.

2. Когда использовать route.paramMap.subscribe?

Если вы собираетесь обновить параметр URL в том же компоненте, вам необходимо использовать подписку.

Хорошая новость в том, что она работает так же, как и любая другая подписка в вашем приложении Angular. 😎

Этот метод полезен только в том случае, если вы планируете изменить параметры URL-адреса в текущем маршруте.

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.car = params.get("carBrand")
  })
}

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

Вот и все! Если вы нашли эту статью полезной, пожалуйста ... вы знаете историю, не нужно упоминать ее снова. 👏👀

Если вы владелец бизнеса или маркетолог, который хочет улучшить 📈 доставляемость своей электронной почты, то вам необходимо посетить www.removebounce.com 👨‍💻.