提交搜索表单后进行角度重定向

Question

我正在使用SpringBoot和Angular 5 Web应用程序，在标题中有一个搜索表单：

<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() 方法路由

在班上

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

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

Answer 2

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

constructor(private router: Router) { }

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

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

有关Angular 5重定向的完整指南，请参阅此详细教程