在同一個按鈕中使用 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()