角度2-重定向到一个外部 URL 并打开一个新的标签

我试图打开一个新的页面时，用户点击链接。我不能使用 Angular 2路由器，因为它没有任何功能重定向到外部 URL。

因此，我使用 window.location.href = “ ...”;

Html 代码:

<button (click)="onNavigate()">Google</tn-submenu-link>

打字稿代码:

onNavigate(){
//this.router.navigateByUrl("https://www.google.com");
window.location.href="https://www.google.com";
}

但是如何在使用 window.location.href 时在新标签页中打开它呢？

199342 次浏览
小开 
onNavigate(){
window.open("https://www.google.com", "_blank");
}
小开

One caveat on using window.open() is that if the url that you pass to it doesn't have http:// or https:// in front of it, angular treats it as a route.

To get around this, test if the url starts with http:// or https:// and append it if it doesn't.

let url: string = '';
if (!/^http[s]?:\/\//.test(this.urlToOpen)) {
url += 'http://';
}


url += this.urlToOpen;
window.open(url, '_blank');
小开

Another possible solution is:

const link = document.createElement('a');
link.target = '_blank';
link.href = 'https://www.google.es';
link.setAttribute('visibility', 'hidden');
link.click();
小开

we can use target = blank to open in new tab

 <a href="https://www.google.co.in/" target="blank">click Here </a>
小开

you can do like this in your typescript code

onNavigate(){
var location="https://google.com",
}

In your html code add an anchor tag and pass that variable(location)

<a href="\{\{location}}" target="_blank">Redirect Location</a>

Suppose you have url like this www.google.com without http and you are not getting redirected to the given url then add http:// to the location like this

var location = 'http://'+ www.google.com
小开

I want to share with you one more solution if you have absolute part in the URL

SharePoint solution with ${_spPageContextInfo.webAbsoluteUrl}

HTML:

<button (click)="onNavigate()">Google</button>

TypeScript:

onNavigate()
{
let link = `${_spPageContextInfo.webAbsoluteUrl}/SiteAssets/Pages/help.aspx#/help`;
window.open(link, "_blank");
}

and url will be opened in new tab.

小开 
var url = "https://yourURL.com";
var win = window.open(url, '_blank');
win.opener = null;
win.focus();

This will resolve the issue, here you don't need to use DomSanitizer. Its work for me

小开

in HTML: 

<a class="main-item" (click)="onNavigate()">Go to URL</a>

OR

<button class="main-item" (click)="onNavigate()">Go to URL</button>

in TS file:

onNavigate(){
// your logic here.... like set the url
const url = 'https://www.google.com';
window.open(url, '_blank');
}
小开

To solve this issue more globally, here is another way using a directive:

import { Directive, HostListener, ElementRef } from "@angular/core";


@Directive({
selector: "[hrefExternalUrl]"
})
export class HrefExternalUrlDirective {
constructor(elementRef: ElementRef) {}


@HostListener("click", ["$event"])
onClick(event: MouseEvent) {
event.preventDefault();


let url: string = (<any>event.currentTarget).getAttribute("href");


if (url && url.indexOf("http") === -1) {
url = `//${url}`;
}


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

then it's as simple as using it like this:

<a [href]="url" hrefExternalUrl> Link </a>

and don't forget to declare the directive in your module.


提交答案