使用routerLink并在同一按钮中单击 [英] Using routerLink and (click) in same button

问题描述

这是关于最佳实践的问题.在同一按钮中使用routerLink并(单击)是否是一种好习惯?

This is asking about a best practice. Is it a good practice to use routerLink and (click) in same button.

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

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

Because we can put the router navigation logic in the back() method, like below,

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

我为此找到的全部是 article ，它不是在讨论要遵循的最佳实践.如果一个比另一个更好，您可以解释原因.

All I found regarding this is, this article which was not talking about the best practice to follow. If one is better than the other, can you explain the reason.

推荐答案

以下是一些如何使用routerLink和click的示例，

Following are few examples how you can play around with routerLink and click ,

希望这会有所帮助:

->如果您想重定向到某些页面，则可以始终使用以下命令:

-> If you want to redirect to certain pages you can always use this :

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

->如果要重定向到页面，但要发送一些参数(例如ID)，请使用:

-> If you want to redirect to a page but want to send some paramater such as ID then use :

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

->如果需要发送查询参数以进行路由，则可以使用

-> If there is a case in which you need to send Query params to route then you can use

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

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

-> If there is a need of code logic before navigating to the page then you need to use

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

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

->除非您正在调用函数销毁变量或保存页面剩余数据，否则还可以使用以下方法，但不是一个好习惯

-> You can also use as follows but not a good practice unless you are calling function to destroy variables or save page leaving data

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

showLoader(){
  // showLoader logic
}

这篇关于使用routerLink并在同一按钮中单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！