使用 routerLink 并（单击）同一按钮

Question

这是询问最佳实践。在同一个按钮中使用 routerLink 和（单击）是一个好习惯吗？

<button routerLink="/link" (click)="back()">

因为我们可以将路由器导航逻辑放在 back() 方法中，如下所示，

this.router.navigate(['/link']);

我发现的关于此的所有内容是这篇文章，它没有讨论要遵循的最佳实践。如果其中一个比另一个更好，你能解释一下原因吗？

Answer 1

以下是一些如何使用

routerLink

和

click

,

的示例

希望这会有所帮助：

-> 如果您想重定向到某些页面，您可以随时使用此:

<a [routerLink]="['/my-book-listing']"> My Books</a>

-> 如果您想重定向到页面但想发送一些参数（例如 ID），请使用：

<a [routerLink]="['/my-book-details','3']">Book number 3</a>

-> 如果您需要向路由发送查询参数，那么您可以使用

<a [routerLink]="['/search-this']" [queryParams]="{text:'sam',category:'social'}">Go Search</a>

-> 如果在导航到页面之前需要代码逻辑，那么您需要使用

<button (click)="createBook()">Create Book</button>

createBook(bookData){
   // Create Book logic
   this.router.navigate(['/my-book-listing']);
}

-> 您也可以按如下方式使用，但这不是一个好习惯，除非您调用函数来销毁变量或保存页面留下的数据

<button (click)="showLoader()" [routerLink]="['/my-book-listing']">Create Book</button>

showLoader(){
  // showLoader logic
}

Answer 2

如果您需要在前往路线之前发生逻辑，您可以导入路由器模块并按原样使用它。

import { Component, OnInit } from '@angular/core'
import { Router } from '@angular/router';

@Component({
   selector: 'app-foo',
   templateUrl: './foo.component.html',
   styleUrls: ['./foo.component.sass']
})
export class FooComponent implements OnInit{
   constructor( private router: Router ) { }
   ngOnInit() {}

   action(){
      // ...Your Logic...
      this.router.navigate([ '/bar' ])
   }
}

<div>
   <button (click)='action()' >Go To Bar</button>
</div>

Answer 3

我不确定最佳实践，但我想说，只要不干扰导航，在同一个按钮中使用 routerLink 和（单击）就可以了。

通过

this.router.navigate(['/link']);

手动导航不是最佳选择，因为 routerLink 处理诸如“在新选项卡中打开”之类的事情，而使用（单击）处理程序实现您自己的操作是不可取的。

Answer 4

当我只需导航到

routerLink

 时，我会选择 

/link

但是，如果在导航之前需要执行一些逻辑，那么我会选择

click()

还有一些情况，你必须通过路由导航传入查询参数，那么我也更愿意使用

click()