在同一个按钮中使用 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

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

通过this.router.navigate(['/link']);手动导航this.router.navigate(['/link']); 是次优的，因为 routerLink 处理诸如“在新选项卡中打开”之类的事情，而使用（单击）处理程序实现您自己的处理程序是不可取的。

Answer 3

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

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 4

例如，当我只需要导航到/link时，我会选择routerLink

但是如果在导航之前需要执行一些逻辑，那么我会去click()

还有一些情况，你必须通过路由导航传递查询参数，那么我也更喜欢使用click()