web-dev-qa-db-ja.com

routerLinkを使用し、同じボタンで（クリック）

これはベストプラクティスについて尋ねています。 routerLinkを使用して、同じボタンで（クリック）することをお勧めします。

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

以下のように、ルータナビゲーションロジックをback（）メソッドに配置できるため、

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

これに関して私が見つけたのは、これ 記事 に従うことです。一方が他方より優れている場合、その理由を説明できますか。

angularangular-ui-router
7
dilantha111

以下は、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
}
11
Sangwin Gawande

ベストプラクティスはわかりませんが、ナビゲーションに干渉しない限り、routerLinkを使用して同じボタンで（クリック）してもかまいません。

RouterLinkは「新しいタブで開く」などを処理するため、this.router.navigate(['/link']);を介した手動ナビゲーションは最適ではありませんが、（クリック）ハンドラーを使用して独自に実装することは望ましくありません。

3
Joshua Chan

たとえば、単に_/link_に移動する必要がある場合は、routerLinkを選択します

しかし、ナビゲートする前に実行する必要があるロジックがある場合は、click()に進みます

また、ルーティングナビゲーションを使用してクエリパラメータを渡す必要がある場合もあります。その場合は、click()

2
Bhushan Babar