在同一个按钮中使用 routerLink 和（单击）

Posted 2023-03-05

【中文标题】在同一个按钮中使用 routerLink 和（单击）

【英文标题】：Using routerLink and (click) in same button

【发布时间】：2018-10-21 10:07:29

【问题描述】：

这是在询问最佳实践。是一个好习惯吗？

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

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

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

我发现的所有这件事都是article，它不是在谈论要遵循的最佳实践。如果一个比另一个好，你能解释一下原因吗？

【参考方案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

【讨论】：

感谢@Sangwin Gawande 的回答。你能解释一下为什么这不是一个好习惯吗？两者都用？我也觉得这不是一个好习惯，这让我提出了这个问题。

你可以看看这个答案：***.com/questions/14867558/…

【参考方案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>

【参考方案3】：

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

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

【讨论】：

你说得很好。因此，使用 this.router.navigate(['/link']); 时无法在新选项卡中打开?

我认为 this.router.navigate 只会更改当前页面的 url 并为给定的 url 实例化适当的组件。如果您要查看github 中的存储库，您可以看到该指令的内部工作原理，例如，它检查 ctrl 的键盘事件以在新选项卡中打开链接。

@dilantha 作为记录，在新选项卡中单击控件似乎也不适用于 routerLink。

没错，routerLink 的作用是在按下 ctrl、shift 或 meta 键时不导航。在这种情况下，如果在锚标记中使用该指令，它将允许您的浏览器“在新选项卡/窗口中打开链接”。

【参考方案4】：

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

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

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

【讨论】：

您也可以在 routerLink 中传递查询参数，对吗？请参阅@Sangwin Gawande 的回答。

@dilantha111 是的，我知道，我说过我会“更喜欢”，这是因为在我的情况下，大多数时候涉及查询参数时都会涉及一些复杂的逻辑，例如评估查询参数通过内部函数赋值，然后赋值。此外，当涉及*ngFor 循环时，它会变得更加复杂。所以它并不总是像[queryParams]="text:'sam',category:'social'" 那样简单，所以你可以根据它做出决定。