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

75

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?

angular typescript

— Varun
quelle

3

Wenn Sie es auf die Verwendung von Javascript eingrenzen können, sollte dies eine Javascript-Frage sein, nicht Angular2. Können Sie diese Lösung auf stackoverflow.com/questions/19851782/… anwenden ?

— Harry Ninh

@HarryNinh Angular 2 und 4 machen das windowObjekt innerhalb einer Komponente nicht verfügbar (während Sie mit der Verwendung des windowglobalen Objekts durchkommen können , wird bevorzugt, plattformspezifische Aufgaben (wie die Verwendung des windowObjekts, das sich zwischen den Browsern unterscheidet) mithilfe eines Angular-Dienstes auszuführen .

— Dai

120

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

— Martin Ocando
quelle

10

Chrome blockiert Popups, wenn ich diese Methode verwende. Haben Sie eine Lösung dafür?

— Sunnyiitkgp

3

@sunnyiitkgp window.open()muss innerhalb eines Rückrufs aufgerufen werden, der durch eine Benutzeraktion ausgelöst wird (Beispiel onclick).

— Gokcand

2

@gokcand es ist offensichtlich, aber es ändert nichts an der Situation, weil immer noch blockiert ist, wie oben erwähnt.

— mpro

26

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

— SaoBiz
quelle

Ich habe eine Woche lang danach gesucht. In Angular 4 funktioniert dies für mich als kurzfristige Lösung: <a href="https://{{url}}">, als es zuvor als Route behandelt wurde. Vielen Dank!

— AherocalledFrog

kann nicht //ausreichen? zB:window.open(``//${this.urlToOpen}``, '_blank')

— Joseph Briggs

8

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();

— dddenis
quelle

2

Diese Methode öffnet Link in neuer Registerkarte. "window.open (url, '_blank');" Popup öffnen, das normalerweise von Chrome blockiert wird

— Lokinder Singh Chauhan

6

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

— Ebrahiem Gamal
quelle

5

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.

— Meile Mijatović
quelle

4

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

— Irrfan23
quelle

4

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

— Sarbasish Mishra
quelle

1

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.

— Uğur Dinç
quelle

0

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>

— Lijo
quelle