Angular 7 Открывает новую вкладку с помощью строки запроса

#angular #typescript

Вопрос:

Я использую Angular 7 с Type script.

Мне нужно иметь возможность перейти к компоненту с queryString на новой вкладке

в настоящее время я использую что-то вроде этого

const url = myBaseUrl ‘?param1= 123amp; param2= 321’ window.open(URL, ‘_blank’);

и это приводит к переходу на правильную страницу, но при загрузке строка запроса была очищена, поэтому она выглядит следующим образом myBaseUrl/0%3param1=123amp;param2=321

что прерывает весь процесс.

Есть ли способ запретить Angular изменять URL-адрес?

Ответ №1:

 const url = this.router.serializeUrl(this.router.createUrlTree([myBaseUrl '/0'], {
      queryParams: {
        params1: "123",
        params2:"321"
      }
  }))
  const newTab = window.open(url, '_blank'); 
  if(newTab) {
      newTab.opener = null;
  }

Ответ №2:

вам нужно предоставить ее отдельно, как показано ниже:

 this.router.navigate([myBaseUrl   ''], { queryParams: { 'param1': 123, 'param2': 321 } });

Ответ №3:

Здесь вы можете сделать, как показано ниже:

 this.router.navigate([myBaseUrl   ''], { queryParams: { 'param1': 123, 'param2': 321 } }).then(result => {  window.open(link, '_blank'); });

1. Что означает?

2. @DongBinKim это было для URL, упомянутого в вопросе, который является простым символом 🙂

3. Я вижу. На самом деле, я попробовал ваш ответ, но откуда взялся link ? Я имею в виду, в моем тесте и моем мышлении, независимо от того, что вы предоставляете в функции навигации по маршрутизатору, разве они не прошли window.open ?

Ответ №4:

Для любого, кто столкнулся с подобной проблемой, вот как я исправил свою проблему.

Проблема оказалась вызвана тем, что наша аутентификация перехватила вызов URL и проверила токен доступа. Затем, когда URL-адрес был передан обратно в angular, он содержал id_token. URL был перехвачен снова, токен был удален, а затем используйте angular router для маршрутизации всего URL.

 this.router.navigate([entireUrl]);

Это то, что вызвало изменение строк запроса.
Я должен был проверить URL на наличие? чтобы указать, что в нем была строка запроса, отделите ее от основного URL-адреса, преобразуйте строку запроса в объект и используйте маршрутизатор для навигации с правильно добавленными параметрами запроса

 if (url.includes('?')) {
    let baseRoute: string = url;
    const splitRoute = baseRoute.split('?');
    baseRoute = splitRoute[0];
    const paramsObj = this.getRouteParamsObject(splitRoute[1]);
    this.router.navigate([baseRoute], {queryParams: paramsObj});
} else {
    this.router.navigate([url]);
}

private getRouteParamsObject(paramString: string): any {
  const pairs = paramString.split('amp;');
  const result = {};
  pairs.forEach((pair: any) =>  {
      pair = pair.split('=');
      result[pair[0]] = decodeURIComponent(pair[1] || '');
  });

  return JSON.parse(JSON.stringify(result));
}

Я надеюсь, что это вам тоже поможет.
Большое спасибо Niraj за его помощь