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

Question

我有一个Angular 5组件，需要在新标签页中打开链接，我尝试了以下方法：

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

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

localhost:4200/www.example.com

我的问题是： 在Angular中做这件事的正确方式是什么？

- AlejoDev

---

这对我有用：<a href="//example.com" target="_blank">页面链接</a>。 - MkMan

你可以直接使用 <a [href]="'www.example.com'" target="_blank">链接</a>。 - Coach

Answer 1

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

在你的 component.html 文件中：

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

如果重定向不正确，您可能需要添加http前缀：

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

在您的 component.ts 文件中：

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

- Harun Or Rashid

---

有人能指出一种方法来做到这一点，其中goToLink函数中的字符串不是“魔术字符串”吗？例如，通过一个变量？ - Highspeed

@BrianAllanWest 我会在相应的组件文件中设置一个变量，并在html中省略参数。如果这不起作用，只需使用默认绑定属性[ ]将其绑定到模板，然后您可以在其中运行任何逻辑。.html goToLink().ts goToLink() { window.open(你的变量在这里, "_blank") } - thenolin

我该如何让它在小弹出窗口中，并监听其URL的变化。 - Mostafa Al Belliehy

我会添加一个 href=''，这样它看起来仍然是可点击的。 - Leonardo Rick

默认情况下，会打开一个新标签页。可以不使用 _blank。 - Yury Matatov

Answer 2

只需像这样将完整的 URL 用作 href：

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

- zhimin

---

这是最简单的方式。 - Wayne Wei

感谢这个答案。简洁明了。 - Carlo Nyte

Answer 3

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

在您的模板中，

<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');
}

- wentjun

---

非常好用，在某些情况下非常方便。正是我所需要的。 - TheViking

你从哪里获取 this.router 中的 router？比如说，router 的导入是什么？或者它是 Angular 核心的一部分吗？ - Naga

@Naga 请这样导入：import { Router } from "@angular/router"; - undefined

Answer 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>

- C.Ikongo

---

就只是这样，最佳答案 - Hutch Moore

Answer 5

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

并且在你的Component.ts文件中

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

- John Anthony Romualdo

---

如果使用“//” + siteUrl，则应在siteUrl中提交https://或http://，也许这是您遇到问题的原因@Nicolas。 - Boštjan Pišler

这是基于您的代码的另一个示例。downloadFile(){ const filePath = 'assets/files'; const fileName = '/myfile.xlsx'; const url = ${filePath}${fileName}; window.open(url, '_blank'); } - C Alonso C Ortega

从可访问性的角度来看，永远不应该在<a>标签中添加click，<a>应该始终具有href属性，按钮和链接并不相同，自IE9以来已经被淘汰，两者都可以完全使用CSS进行样式设置...现在是2021年了。 - PDA

Answer 6

一些浏览器可能会阻止通过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

---

最佳答案。安全和干净。 - Rafael de Castro

Answer 7

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

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

在 component.html 文件中：

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

- Femina

Answer 8

试试这个：

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

不需要使用'_blank'。 window.open默认在新选项卡中打开链接。

- DINESH Adhikari

---

他为什么要尝试那个？那个有什么作用？ - Andreas

这是关于如何在Angular 5中在新标签页中打开链接的答案：window.open默认会在新标签页中打开链接。 - DINESH Adhikari

Answer 9

您可以在您的代码中添加 https，这对我有效。

goToLink(url: string) {
    window.open('https://' + url, "_blank");
}

- haga ginting

Answer 10

在你的component.html文件中，添加以下HTML代码。

<a [routerLink]="" (click)="openSiteinNewTab()">click here to view</a>

在你的component.ts文件中，添加以下的Typescript代码。

export class AppComponent {
  siteUrl = "stackoverflow.com";

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

      

- hari harakumar