Блог

Главная - Вопросы по программированию - Angular 10 | Получение параметров запроса в URL null или undefined

Angular 10 | Получение параметров запроса в URL null или undefined

#angular #typescript

#angular #typescript

Вопрос:

У меня есть этот маршрут с параметром запроса lang :

 http://localhost:4200/?lang=de

Ни один из следующих примеров не работает, он всегда равен null или undefined

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

constructor(private route: ActivatedRoute) { 
  console.log(this.route.snapshot.params.lang);
  console.log(this.route.snapshot.queryParamMap.get('lang'));
}

ngOnInit(): void {
  this.route.queryParams.subscribe(params => {
    let lang = params['lang'];  
    console.log(lang);
  });
  console.log(this.route.snapshot.queryParamMap.get('lang'));
  console.log(this.route.snapshot.params.lang);
}

Что я делаю не так? Сейчас я прочитал несколько руководств, даже некоторые для angular 10. Каждый из них показывает приведенные выше примеры, но я все еще не могу получить значение lang .

Комментарии:

1. Какая у вас версия angular?

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

3. можете ли вы попробовать это this.route.snapshot.paramMap.get(‘lang’);

Ответ №1:

Вот мое рабочее решение:

 var url = new URL(window.location.href);
var lang = url.searchParams.get("lang");

Это работает в ngInit и в конструкторе.

Комментарии:

1. Это также работает в app.component без маршрутизатора-розетки!

2. Это решение неверно для SSR.

Ответ №2:

Для механизма Observable вы можете использовать paramMap observable, подобный этому, с неопределенной проверкой.

 this.route.paramMap.subscribe(params => {
if(params.get('lang')){
    let lang = params.get('lang');  
    console.log(lang);
    }
  });

И другие решения, которые уже предложил @Leo.

Спасибо.

Комментарии:

1. Вы знаете, можно ли использовать этот метод без использования текущего маршрута? Например: this.router.parseUrl('https://myapiendpoint.com?page=2');

Ответ №3:

Как насчет

 this.route.snapshot.paramMap.get('lang');

Из официальной документации?

Комментарии:

1. Вы пробовали это в constructor или ngOnInit?

2. Я пробовал в конструкторе in, но нашел другое решение, смотрите Мой ответ

3. Хорошо, рад, что вы нашли свой ответ. Я бы все равно попробовал свой ответ в ngOnInit , хотя, поскольку это скорее «угловой способ».

Ответ №4:

   constructor(private route: ActivatedRoute,
              private router: Router) {
    this.route.queryParamMap.pipe(
      filter(queryParamMap => queryParamMap.has('lang'))
    ).subscribe(queryParamMap => {
      const lang = queryParamMap.get('lang');
      console.log(lang);
    });

    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      switchMapTo(this.route.queryParamMap)
    ).subscribe(queryParamMap => {
      const lang = queryParamMap.get('lang');
      console.log(lang);
    });
  }