Question

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

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

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

localhost:4200/www.example.com

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

Answer 1

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

在您的component.html文件中-

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

在您的component.ts文件中-

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

Answer 2

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

和您的Component.ts

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

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

Answer 4

尝试这个?

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

无需使用'_blank'

`window.open` by default open link in new tab

Answer 5

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

Answer 6

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

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

在component.html文件中：

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

Answer 7

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

Answer 8

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

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

Answer 9

您可以尝试绑定属性白色路线

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

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

如何在角度为5的新标签页中打开链接

9 个答案: