angular 提交搜索表单后重定向

Question

我正在开发 SpringBoot 和 Angular 5 网络应用程序，我在 header 中有一个搜索表单：

<div class="searchDiv float-right">
    <form (ngSubmit)="onsubmit()" >
      <input class="searchBtn searchBtnHeader" type="text" role="search" placeholder="Search..." title="search field">
      <button class="fa fa-search align-middle searchBtn searchIcone" type="submit" [routerLink]="['/search']"></button>
    </form>
</div>

如何在 Angular 5 中重定向到更详细的搜索页面（组件）？

Answer 1

在您的 onSubmit() 方法中，您可以添加编程重定向，如下所示

constructor(private router: Router) { }

onSubmit() {
  // some stuff
  this.router.navigate(['/search']);
}

因此您不再需要提交按钮中的 [routerLink] 属性。

有关 Angular 5 重定向的完整指南，请查看 this 详细教程

Answer 2

从 onsubmit() 方法以编程方式路由

在Class

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

...
constructor(private router: Router) {}
...
onsubmit() {
      this.router.navigate(['/search']);
}

angular 提交搜索表单后重定向

angular redirection after submiting search form

angular

angular-ui-router