使用 Angular 路由器打开新选项卡 - Javascript

使用 Angular 路由器来打开新选项卡可以让用户在不离开当前页面的情况下查看另一个页面。在 Angular 中，可以通过打开新窗口并使用新窗口的 URL 来实现这一目标。

步骤

1. 在组件中注入 Angular 的 Router服务:

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

export class MyComponent {
  constructor(private router: Router) {}
}

2. 创建一个路由链接，并使用 target="_blank" 属性来告诉浏览器要在新标签页或窗口中打开链接:

<a [routerLink]="['/my-route']" target="_blank">打开新选项卡</a>

3. 通过 navigate() 方法，使用 window.open() 打开新的选项卡：

window.open(this.router.createUrlTree(['/my-route']).toString(), '_blank');

代码片段

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

export class MyComponent {
  constructor(private router: Router) {}

  openNewTab() {
    window.open(this.router.createUrlTree(['/my-route']).toString(), '_blank');
  }
}

<button (click)="openNewTab()">打开新选项卡</button>