Winkel 2 - Leiten Sie zu einer externen URL um und öffnen Sie sie in einem neuen Tab

Ich versuche, eine neue Seite zu öffnen, wenn der Benutzer auf einen Link klickt. Ich kann Angular 2 Router nicht verwenden, da es keine Funktionen zum Umleiten zu einer externen URL gibt.

Also benutze ich window.location.href = "...";

HTML Quelltext:

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

Typoskript-Code:

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

Aber wie kann ich es in einem neuen Tab öffnen? bei Verwendung von window.location.href?

onNavigate(){
    window.open("https://www.google.com", "_blank");
}

Eine Einschränkung bei der Verwendung window.open()ist, dass wenn die URL, die Sie an sie weitergeben, nicht http://oder nicht https://davor steht, Angular sie als Route behandelt.

Um dies zu umgehen, testen Sie, ob die URL mit http://oder beginnt, https://und hängen Sie sie an, wenn dies nicht der Fall ist.

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

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

Eine andere mögliche Lösung ist:

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

in HTML:

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

ODER

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

in TS-Datei:

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

Ich möchte Ihnen noch eine Lösung mitteilen, wenn Sie einen absoluten Anteil an der URL haben

SharePoint-Lösung mit ${_spPageContextInfo.webAbsoluteUrl}

HTML:

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

Typoskript:

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

und URL werden in einem neuen Tab geöffnet.

Sie können dies in Ihrem Typoskript-Code tun

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

Fügen Sie in Ihrem HTML-Code ein Ankertag hinzu und übergeben Sie diese Variable (Position).

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

Angenommen , Sie url wie diese haben , www.google.comohne , httpund Sie sind nicht auf die angegebene URL umgeleitet zu werden fügen Sie dann http://zu der locationwie folgt aus

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

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

Dadurch wird das Problem behoben. Hier müssen Sie DomSanitizer nicht verwenden. Es ist Arbeit für mich

Um dieses Problem globaler zu lösen, verwenden Sie eine andere Richtlinie :

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

dann ist es so einfach wie es zu benutzen:

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

und vergessen Sie nicht, die Direktive in Ihrem Modul zu deklarieren.

Wir können target = blank verwenden, um in einem neuen Tab zu öffnen

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