Wie öffne ich einen Link in einem neuen Tab mit Angular?


81

Ich habe eine eckige 5-Komponente, die einen Link in einem neuen Tab öffnen muss. Ich habe Folgendes versucht:

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

Wenn ich den Link öffne, wird die Anwendung langsam und öffnet eine Route wie:

localhost:4200/www.example.com

Meine Frage ist: Was ist der richtige Weg, dies im Winkel zu tun?


3
Das funktioniert bei mir<a href="https://example.com" target="_blank">page link</a>
M Mansour

Sie könnten nur verwenden<a [href]="'www.example.com'" target="_blank">Link</a>
Coach

Antworten:


115

Verwenden Sie window.open(). Es ist ziemlich einfach!

In Ihrer component.htmlDatei-

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

In Ihrer component.tsDatei-

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

Kann jemand einen Weg aufzeigen, wie die Zeichenfolge in der goToLink-Funktion keine "magische Zeichenfolge" ist? Zum Beispiel durch eine Variable?
Brian Allan West

@BrianAllanWest Ich würde einfach eine Variable in der entsprechenden Komponentendatei setzen und den Parameter im HTML-Code weglassen. Wenn dies nicht funktioniert, binden Sie es einfach mit der Standardbindungseigenschaft [] an die Vorlage, und Sie können dann die gewünschte Logik ausführen. .html goToLink () .ts goToLink () {window.open (Ihre Variable hier, "_blank")}
thenolin

Wie kann ich es in einem kleinen Popup-Fenster anzeigen lassen und Änderungen in der URL abhören?
Mostafa Al Belliehy

Ich würde ein hinzufügen href='', damit es immer noch anklickbar aussieht
Leonardo Rick

Kann ohne _blank verwendet werden . Standardmäßig wird eine neue Registerkarte geöffnet.
Yury Matatov

34

Verwenden Sie einfach die vollständige URL wie folgt:

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

9

In der app-routing.modules.tsDatei:

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

In der component.htmlDatei:

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

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

und in Ihrer Component.ts

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

7

Ich habe gerade eine alternative Möglichkeit gefunden, eine neue Registerkarte mit dem Router zu öffnen.

Auf Ihrer Vorlage,

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

Und auf Ihrer component.ts können Sie serializeUrl verwenden, um die Route in eine Zeichenfolge zu konvertieren, die mit verwendet werden kann window.open()

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

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

5

Versuche dies:

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

Keine Notwendigkeit zu verwenden '_blank'. window.openStandardmäßig wird ein Link in einer neuen Registerkarte geöffnet.


1
Warum sollte er das versuchen? Was macht das?
Andreas

1
Dies ist die Antwort auf diese Frage "So öffnen Sie einen Link in einem neuen Tab in Winkel 5" Fenster. Öffnen Sie standardmäßig einen Link in einem neuen Tab
DINESH Adhikari

4

Fügen Sie einfach target="_blank"auf die

<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>

2

Einige Browser blockieren möglicherweise das von erstellte Popup window.open(url, "_blank");. Eine Alternative besteht darin, einen Link zu erstellen und darauf zu klicken.

...

  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();
  }
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.