Блог

Представьте ситуацию, когда у нас есть один компонент, который должен быть заполнен данными по-разному на основе разных входящих параметров url.

То есть рассмотрим приведенные ниже шаблоны URL:

 1. http://localhost:4200/venues/5760665662783488 
2. http://localhost:4200/users/2gjmXELwGYN6khZgzaeWKmLtIDt2 
3. http://localhost:4200/revenue 
  

Внутри компонента,
Если я использую интерфейс ActivatedRouteSnapshot для регистрации параметров моих входящих URL-адресов, я получаю следующие результаты:

 1. {venueid: "5760665662783488"}
2. {userid: "2gjmXELwGYN6khZgzaeWKmLtIDt2"}
3. {}
  

Теперь, если я хочу заполнить поля моего отдельного компонента тремя различными способами на основе трех разных параметров URL, как указано выше, как это можно сделать?

Я имею в виду, как я могу заполнить по-другому для входящего venueid / userid /{}? Существует ли метод в интерфейсе ActivatedRouteSnapshot для проверки ключа объекта params?

Я попытался просмотреть документацию для интерфейса ActivatedRouteSnapshot, но не нашел ответа.

Фрагмент моего кода для регистрации параметров url: console.log(this.activatedRoute.snapshot.params);

Я хотел бы изучить различные способы достижения этой функциональности, если их существует несколько. Заранее спасибо.

Ну ActivatedRouteSnapshot , у него есть paramMap свойство, а у ParamMap класса есть .has(paramName) метод для этого.

   if(myActivatedRouteSnapshot.paramMap.has('userid')) {
    ...
  }
  

Где myActivatedRouteSnapshot ActivatedRouteSnapshot вы говорите.

https://angular.io/api/router/ActivatedRouteSnapshot#paramMap
https://angular.io/api/router/ParamMap

Вы можете использовать свойство paramMap ActivatedRouteSnapshot, которое возвращает объект paramMap, который также имеет ключи свойств.

Итак, для регистрации ключей параметров, которые вы используете:

 console.log(this.activatedRoute.snapshot.paramMap.keys);
  

Я попробовал это..

 const obj = this.activatedRoute.snapshot.params;
    if (Object.keys(obj)[0] === 'venueid') {
      console.log('venueid match'); // load venueid data for the component
    } else if(Object.keys(obj)[0] === 'userid') {
      console.log('userid match'); // load userid data for the component
    } else {
      console.log('other match'); // load other data for the component
    }
  

Но ответ от @AlesD и @Robin De Schepper кажется более сложным. Поэтому я пойду с ними.