这是在询问最佳实践。在同一个按钮中使用 routerLink 和（单击）是一个好习惯吗？
<button routerLink="/link" (click)="back()">
因为我们可以把路由导航逻辑放在 back() 方法中，如下所示，
this.router.navigate(['/link']);
我发现的所有这件事都是article，它不是在谈论要遵循的最佳实践。如果一个比另一个好，你能解释一下原因吗？
【问题讨论】：
以下是几个如何使用 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
}
【讨论】：
如果您需要在转到路由之前发生逻辑，您可以导入路由器模块并使用它。
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>
【讨论】：
我不确定最佳做法，但我会说只要不干扰导航，就可以在同一个按钮中使用 routerLink 和 (click)。
通过 this.router.navigate(['/link']); 手动导航不是最佳选择，因为 routerLink 处理诸如“在新选项卡中打开”之类的事情，而使用（单击）处理程序实现您自己的处理是不可取的。
【讨论】：
routerLink 的作用是在按下 ctrl、shift 或 meta 键时不导航。在这种情况下，如果在锚标记中使用该指令，它将允许您的浏览器“在新选项卡/窗口中打开链接”。
当我只需要导航到 /link 时，我会选择 routerLink
但是如果在导航之前需要执行一些逻辑，那么我会选择click()
还有一些情况下你必须通过路由导航传入查询参数，那么我也更喜欢使用click()
【讨论】：
*ngFor 循环时，它会变得更加复杂。所以它并不总是像[queryParams]="{text:'sam',category:'social'}" 那样简单，所以你可以根据它做出决定。