Как использовать свойство params ActivatedRouteSnapshot для различного заполнения данных в компоненте - PullRequest
Новая
       5

Как использовать свойство params ActivatedRouteSnapshot для различного заполнения данных в компоненте

1 голос
/ 12 апреля 2019

Представьте себе ситуацию, когда у нас есть один компонент, который должен заполняться данными по-разному в зависимости от входящих параметров 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);

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

Ответы [ 3 ]

1 голос
/ 12 апреля 2019

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

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

console.log(this.activatedRoute.snapshot.paramMap.keys);
1 голос
/ 12 апреля 2019

Ну, у 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

0 голосов
/ 12 апреля 2019

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

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 кажется более сложным.Так что я пойду с ними.

...