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?

AlejoDev
quelle
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");
}
Harunur Rashid
quelle
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>
zhimin
quelle
9

In der app-routing.modules.tsDatei:

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

In der component.htmlDatei:

target="_blank" [routerLink]="['/hero', '/sachin']"
Femina
quelle
8
<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

und in Ihrer Component.ts

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}
John Anthony Romualdo
quelle
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');
}
gojun
quelle
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.

DINESH Adhikari
quelle
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>
C.Ikongo
quelle
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();
  }
Morlo Mbakop
quelle