Angular Router URL Кодировка специальных символов и поведение браузера

Question

Я просто не могу найти решение для такой проблемы. Я разрабатываю поисковую систему, и я хотел бы отобразить в URL, что пользователь пытается найти следующим образом:

https://my-site.com/search;query=%28rockstar;search=true;page=0

Пользователь пытается найти (rockstar фразу.

Когда я вставляю этот URL в браузер, он работает как положено, но браузер Chrome отображает этот URL следующим образом:

https://my-site.com/search;query=(rockstar;search=true;page=0

Таким образом, %28 изменяется на (. Я не знаю, зависит ли это поведение от Angular или Browser. Когда у меня есть URL с (, обновление F5 не работает, потому что Angular Router сообщает о проблеме, подобной этой:

Cannot match any routes. URL Segment: 'rockstar;search=true;page=0'

Копирование ссылки из адресной строки URL также бесполезно из-за этого поведения скопированная ссылка содержит символ ( (не %28). Как предотвратить, чтобы %28 и другие специальные символы не декодировались браузером в адресной строке URL? Проблема возникает в Angular v5.2.5

Вот демонстрационный пример с этой проблемой: https://angular -url-problem.stackblitz.io

Обратите внимание, что в Angular 6 проблема не существует: https://angular -url-problem-v6.stackblitz.io

Answer 1

Это не работает, потому что вы не смотрите на правильные параметры. Как видите, в этот стек вам даже не нужно кодировать свои параметры.

Вам также не нужно заходить слишком далеко, чтобы создавать параметры запроса. Angular обеспечивает высокий уровень абстракции, используйте его в своих интересах.

ngOnInit(): void {
  this._route.queryParamMap
    .subscribe(params => {
      this.form.patchValue({
        query: params.get('query') || '',
      });
    });
}

public onSubmit(): void {
  const query: string = this.form.value.query;
  this._router.navigate(['/search'], {
    queryParams: {
      query
    }
  })
}

РЕДАКТИРОВАТЬ с матричной нотацией: stackblitz

ngOnInit(): void {
  this._route.params
    .subscribe(params => {
      this.form.patchValue({
        query: params['query'] || '',
      });
    });
}

public onSubmit(): void {
  const query: string = this.form.value.query;
  this._router.navigate(['/search', { query }]);
}