Angularで新しいウィンドウでルーティングされたページを開く

Angularで新しいタブでリンクを開く方法

target="_blank" 属性を使用する

これは最も簡単な方法です。リンク要素に target="_blank" 属性を追加するだけです。

<a href="https://www.google.com" target="_blank">Googleを開く</a>

window.open() メソッドを使用して、新しいタブでURLを開くことができます。

<button (click)="openNewTab()">Googleを開く</button>

openNewTab() {
  window.open('https://www.google.com', '_blank');
}

Router モジュールを使用する

Angularの Router モジュールを使用して、新しいタブでルーティングされたページを開くことができます。

<a routerLink="/about" target="_blank">Aboutページを開く</a>

import { Router } from '@angular/router';

constructor(private router: Router) {}

openNewTab() {
  this.router.navigate(['/about'], { target: '_blank' });
}

<a (click)="openNewTab()">Aboutページを開く</a>

import { Router, NavigationExtras } from '@angular/router';

constructor(private router: Router) {}

openNewTab() {
  const navigationExtras: NavigationExtras = {
    target: '_blank'
  };

  this.router.navigate(['/about'], navigationExtras);
}

その他の注意事項

• target="_blank" 属性を使用する場合は、XSS攻撃のリスクに注意する必要があります。
• window.open() メソッドを使用する場合は、ポップアップブロッカーによってブロックされる可能性があります。
• Router モジュールを使用する場合は、NavigationExtras インターフェースを使用して、新しいタブで開くかどうかを明示的に指定する必要があります。

HTML

<a href="https://www.google.com" target="_blank">Googleを開く</a>

<button (click)="openNewTab()">Googleを開く</button>

<a routerLink="/about" target="_blank">Aboutページを開く</a>

<a (click)="openNewTabWithRouter()">Aboutページを開く</a>

TypeScript

import { Router, NavigationExtras } from '@angular/router';

constructor(private router: Router) {}

openNewTab() {
  window.open('https://www.google.com', '_blank');
}

openNewTabWithRouter() {
  const navigationExtras: NavigationExtras = {
    target: '_blank'
  };

  this.router.navigate(['/about'], navigationExtras);
}

このコードは、次のことを行います。

• target="_blank" 属性を使用して、新しいタブで https://www.google.com を開きます。
• Router モジュールを使用して、新しいタブで /about ページを開きます。

このコードを参考に、ニーズに合った方法で新しいタブでリンクを開いてください。

Angularで新しいタブでリンクを開くその他の方法

ng-click ディレクティブを使用して、新しいタブでリンクを開くことができます。

<a href="https://www.google.com" ng-click="openNewTab()">Googleを開く</a>

openNewTab() {
  window.open('https://www.google.com', '_blank');
}

<a href="https://www.google.com" (click)="openNewTab()">Googleを開く</a>

openNewTab() {
  window.open('https://www.google.com', '_blank');
}

<a routerLink="/about" [target]="'blank'">Aboutページを開く</a>

import { Location } from '@angular/router';

constructor(private location: Location) {}

openNewTab() {
  this.location.go('/about', '_blank');
}

これらの方法は、上記で説明した方法と同様の方法で動作します。どの方法を使用するかは、要件と好みによって異なります。

注意事項

• Location サービスを使用する場合は、go() メソッドの第2引数に '_blank' を指定する必要があります。