如何使用angular在新标签页中打开链接？

81

我有一个angular 5组件，需要在新选项卡中打开链接，我尝试了以下操作：

<a href="www.example.com" target="_blank">page link</a>

当我打开链接时，应用程序变慢并打开如下路径：

localhost:4200/www.example.com

我的问题是：正确地做到这一点的正确方法是什么？

— 阿列霍·德夫（AlejoDev）
source

3

这对我<a href="https://example.com" target="_blank">page link</a>

— 有用

您可以使用<a [href]="'www.example.com'" target="_blank">Link</a>

— 教练

115

使用window.open()。这很简单！

在您的component.html文件中-

<a (click)="goToLink("www.example.com")">page link</a>

在您的component.ts文件中-

goToLink(url: string){
    window.open(url, "_blank");
}

— 哈鲁努尔·拉希德（Harunur Rashid）
source

有人可以指出在goToLink函数中的字符串不是“魔术字符串”的情况下该怎么做吗？例如，通过变量？

— Brian Allan West

@BrianAllanWest我只需要在相应的组件文件中设置一个变量，然后将参数保留在html中即可。如果这不起作用，只需使用默认的绑定属性[]将其绑定到模板，然后就可以在其上运行任何逻辑。.html goToLink（）.ts goToLink（）{window.open（您的变量在这里，“ _ blank”）}

— thenolin

如何让它出现在一个小的弹出窗口中，并监听其URL中的更改。

— Mostafa Al Belliehy

我要添加一个href=''，这样它仍然看起来可点击

— 莱昂纳多·里克

可以不带_blank使用。默认情况下，将打开一个新选项卡。

— Yury Matatov

34

像这样使用完整的URL作为href：

<a href="https://www.example.com/" target="_blank">page link</a>

— 志民
source

9

在app-routing.modules.ts文件中：

{
    path: 'hero/:id', component: HeroComponent
}

在component.html文件中：

target="_blank" [routerLink]="['/hero', '/sachin']"

— 女性气质
source

8

<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

并在您的Component.ts中

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}

— 约翰·安东尼·罗曼多
source

7

我刚刚发现了使用路由器打开新标签页的另一种方法。

在您的模板上，

<a (click)="openNewTab()" >page link</a>

在component.ts上，您可以使用serializeUrl将路由转换为字符串，该字符串可以与 window.open()

openNewTab() {
  const url = this.router.serializeUrl(
    this.router.createUrlTree(['/example'])
  );

  window.open(url, '_blank');
}

— 温俊
source

5

试试这个：

 window.open(this.url+'/create-account')

无需使用'_blank'。window.open默认情况下，在新标签页中打开一个链接。

— DINESH Adhikari
source

1

他为什么要尝试呢？那是做什么的？

— 安德烈亚斯（Andreas）

1

这是这个问题的答案“如何在angular 5的新选项卡中打开链接” window.open默认情况下在新选项卡中打开链接

— DINESH Adhikari

4

只需添加target="_blank"到

<a mat-raised-button target="_blank" [routerLink]="['/find-post/post', post.postID]"
    class="theme-btn bg-grey white-text mx-2 mb-2">
    Open in New Window
</a>

— 伊孔戈
source

2

某些浏览器可能会阻止由创建的弹出窗口window.open(url, "_blank");。另一种方法是创建一个链接，然后单击它。

...

  constructor(@Inject(DOCUMENT) private document: Document) {}
...

  openNewWindow(): void {
    const link = this.document.createElement('a');
    link.target = '_blank';
    link.href = 'http://www.your-url.com';
    link.click();
    link.remove();
  }

— 莫洛·姆巴科普（Morlo Mbakop）
source