如何使用角度在新标签中打开链接？答案

【问题标题】：How to open a link in new tab using angular?如何使用角度在新标签中打开链接？
【发布时间】：2019-02-13 20:17:15
【问题描述】：

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

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

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

localhost:4200/www.example.com

我的问题是：用角度做这件事的正确方法是什么？

【问题讨论】：

这对我有用<a href="//example.com" target="_blank">page link</a>
你可以使用<a [href]="'www.example.com'" target="_blank">Link</a>

标签： html angular routes anchor

【解决方案1】：

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

在您的component.html 文件中-

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

在您的component.ts 文件中-

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

【讨论】：

有人能指出在 goToLink 函数中的字符串不是“魔术字符串”的情况下执行此操作的方法吗？例如，通过变量？
@BrianAllanWest 我只需在相应的组件文件中设置一个变量，并将参数留在 html 中。如果这不起作用，只需使用默认绑定属性 [ ] 将其绑定到模板，然后您可以在其上运行任何您想要的逻辑。 .html goToLink() .ts goToLink() { window.open(Your Variable Here, "_blank") }
如何让它在一个小的弹窗中，并监听其 URL 的变化。
我会添加一个href=''，所以它看起来仍然可以点击
可以在没有 _blank 的情况下使用。默认情况下，会打开一个新选项卡。

【解决方案2】：

你可以在你的代码中添加 https，它对我有用

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

【讨论】：

【解决方案3】：

您可以尝试将属性绑定到路由

在您的 component.ts 中 user:any = 'linkABC';

在您的 component.html 中 <a target="_blank" href="yourtab/{{user}}">new tab </a>

【讨论】：

【解决方案4】：

某些浏览器可能会阻止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();
  }

【讨论】：

最佳答案。安全干净

【解决方案5】：

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

在你的 Component.ts 中

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

【讨论】：

如果使用 "//" + siteUrl 那么 https:// 或 http:// 应该在 siteUrl 中提交，这可能是你的问题@Nicolas
这是基于您的代码的其他示例。 downloadFile(){ const filePath = 'assets/files'; const fileName = '/myfile.xlsx'; const url = ${filePath}${fileName}; window.open(url, '_blank'); }
从可访问性的角度来看，不应该向标签添加点击，应该总是有一个 href 属性，按钮和链接不一样，两者都可以完全用 CSS 设置样式，因为早已退役的IE9……2021人了

【解决方案6】：

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

在您的模板上，

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

【讨论】：

在某些情况下非常好用。正是我需要的。

【解决方案7】：

只需将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>

【讨论】：

字面意思就是这样，最佳答案

【解决方案8】：

试试这个：

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

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

【讨论】：

他为什么要这么做？那有什么作用？
这是这个问题的答案“如何在 Angular 5 的新标签中打开链接”窗口。默认打开在新标签中打开链接

【解决方案9】：

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

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

在component.html 文件中：

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

【讨论】：

【解决方案10】：

只需像这样使用完整的 url 作为 href：

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

【讨论】：

这是最简单的方法。