在 angular 中使用導航時，在新選項卡中打開鏈接未在新選項卡中打開

Question

在 HTML 頁面中

<h2 class="entry-title"><a href="javascript:void(0)" (click)="moreInfo(fashion)">{{fashion.postName}}</a></h2>

在 Component.ts

moreInfo(data) {
    this.router.navigate(['/blog-info/', data.postName]);
  }

Answer 1

您需要在 HTML 中添加目標屬性

<h2 class="entry-title"><a target="_blank" href="javascript:void(0)" (click)="moreInfo(fashion)">your template expression</a></h2>

Answer 2

如果你想這樣做，你應該有href屬性。 所以， routerLink是一個不錯的選擇。 另一種方式：

<h2 class="entry-title"><a href="/blog-info/{{fashion.postName}}" (click)="moreInfo($event, fashion)">{{fashion.postName}}</a></h2>

moreInfo(event, data) {
    event.preventDefault();
    this.router.navigate(['/blog-info/', data.postName]);
}

Answer 3

在routerLink中調用function。 在組件中創建 function：

moreInfo(data) {
     return  data.postName.replace(/\s/g, '-') + '-' + data._id;
  }

在 routerLink 中這樣使用：

[routerLink]="['/blog-info', moreInfo(fashion)]"