Неправильный URL читается, когда я хочу передать параметр в мой URL

Question

Я хочу передать параметр в своем URL при нажатии кнопки поиска. Я хотел, чтобы это выглядело так. / Результат? Поиск = живица

Тем не менее, я получаю эту ошибку в консоли. Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'result;search=sap' Я не могу понять, что я делаю неправильно. Вот мой код

SearchComponent.ts

search(){
    //this function is accessed when a user clicks on a search button in the HTML
    this.router.navigate(['/result', { search: this.query }]);
    //this.query = sap
}

AppModule.ts

 const routes: Routes = [
    //other routes here
  { path: 'result/:search', component: SearchComponent}
 ];

@NgModule({
  declarations: [
    //other components
    SearchComponent
  ] ,
  imports: [
    //other modules
    RouterModule.forRoot(routes, {}),

  ],

Answer 1

Если вам нужны параметры запроса, ваша конфигурация маршрута должна выглядеть так:

 const routes: Routes = [
    //other routes here
  { path: 'result', component: SearchComponent}
 ];

Параметры запроса являются необязательными, поэтому они не включены в конфигурацию маршрута.

И синтаксис для параметров запроса в navigate как следует:

this.router.navigate(['/result'], 
                     {queryParams: { search: this.query }});

Полученный URL-адрес должен выглядеть примерно так:

http://localhost:4200/result?search=sap

См. Этот пост для получения дополнительной информации: Отправка данных с помощью route.navigate в Angular 2

Answer 2

То, что вы делаете - это смешиваете 2 разных метода параметров URL.

1. {путь: 'результат /: поиск', компонент: SearchComponent} Это параметризованный метод URL. Это означает, что этот URL должен всегда иметь что-то после результата.

Например:

result / qwe (здесь qwe будет отображаться для поиска)

result / asdasd (здесь asdasd будет отображаться для поиска)

результат (это ошибка, так как нет результата после результата)

2. результат? Search=qwe

Здесь поиск параметров не является обязательным. Если вы хотите, чтобы ваш URL работал как /result? Search=qwer, тогда a. Сохраните ваши маршруты к {path: 'result', component: SearchComponent}. б. Используйте параметр Route или ActivatedRoute. Например this.route.param.subscribe(param => console.log(param))