如何打开一个新的标签页链接使用角度?

我有一个角5分量,需要打开一个新的标签页链接,我尝试了以下内容:

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

当我打开链接时,应用程序会变慢并打开一个路由,比如:

localhost:4200/www.example.com

我的问题是: 什么是正确的方法做到这一点,在角度?

300735 次浏览

像这样使用完整的网址:

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

使用 window.open()。它非常简单!

在你的 component.html文件-

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

在你的 component.ts文件-

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

app-routing.modules.ts文件中:

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

component.html文件中:

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

试试这个:

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

不需要使用 '_blank'.window.open默认情况下会在新的选项卡中打开一个链接。

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

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

在你的模板上,

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

在您的 Component. ts 上,可以使用 seralizeUrl 将路由转换为字符串,可以与 window.open()一起使用

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


window.open(url, '_blank');
}
<a [routerLink]="" (click)="openSite(SiteUrl)">\{\{SiteUrl}}</a>

和你的组件

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

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

您可以尝试绑定属性白路由

在你的组件中 user:any = 'linkABC';

在您的组件中 <a target="_blank" href="yourtab/\{\{user}}">new tab </a>

你可以在你的代码中添加 https,这对我很有用

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