Comment ouvrir un lien dans un nouvel onglet en utilisant angular ?

Question

J'ai un composant angulaire 5 qui doit ouvrir un lien dans un nouvel onglet, j'ai essayé ce qui suit :

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

quand j'ouvre le lien, l'application devient lente et ouvre une route comme :

localhost:4200/www.example.com

Ma question est la suivante : Quelle est la manière correcte de faire cela en angulaire ?

Answer 1

Utilisez window.open() . C'est assez simple !

Dans votre component.html fichier-

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

Dans votre component.ts fichier-

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

Answer 2

Utilisez simplement l'url complète comme href comme ceci :

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

Answer 3

Je viens de découvrir une autre façon d'ouvrir un nouvel onglet avec le routeur.

Sur votre modèle,

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

Et dans votre component.ts, vous pouvez utiliser serializeUrl pour convertir la route en une chaîne, qui peut être utilisée avec window.open()

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

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

Answer 4

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

et dans votre Component.ts

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

Answer 5

Dans le app-routing.modules.ts fichier :

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

Dans le component.html fichier :

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