如何使用来自 Angular 2 组件的路由器打开新的浏览器选项卡？答案

【问题标题】：How to open new browser tab using router from angular 2 component?如何使用来自 Angular 2 组件的路由器打开新的浏览器选项卡？
【发布时间】：2016-12-29 12:41:24
【问题描述】：

我有一个 angular 2 组件，需要导航到另一条路线，但在不同的浏览器选项卡中。下面的代码在同一浏览器选项卡中导航。

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

    @Component({
         templateUrl: 'quotes-edit.component.html'
    })

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

         this.router.navigate(['quote/add']);
    }

【问题讨论】：

你使用任何模型或类？
stackoverflow.com/questions/40760099/… 的副本
不同的浏览器选项卡是不同的应用程序。 Angular 路由器不支持导航到另一个选项卡。
感谢@GünterZöchbauer。根据 zerohero 评论中的答案链接，我需要使用 window.open 打开新标签。
我认为这是不可能的。看到这个：stackoverflow.com/questions/41096375/…

标签： angular typescript angular2-routing

【解决方案1】：

Angular 应用程序是 SPA（单页应用程序），这意味着路由器只不过是一个模块，用于模拟不必要的 Route 更改。您可以像这样在另一个选项卡中的另一个路由中打开重定向

  /**
   * Open url in a new tab
   */
  navigateToNewTab(): void {
    // Here you can get the url
    const { protocol, host } = window.location;
    // Or use the router
    // this.router.url

    const path = '...';

    const url = `${protocol}//${host}/${path}`;
    window.open(url,'_blank');
  }

【讨论】：

【解决方案2】：

您不会为此使用角度路由器，而是可以创建一个具有以下功能的函数

 openinbrowserclicked(url) {
    window.open(
      'url',
      '_blank',
      'toolbar=no,resizable=yes,scrollbars=yes'
    );
  }

【讨论】：