Routeur angulaire 6 Lien sur un nouvel onglet

Il existe un moyen plus récent d'ouvrir de nouveaux onglets à l'aide de routerLink , mais à mon avis, c'est toujours une option plus simple , car les deux méthodes nécessitent toujours d'utiliser window.open () .

Sur votre component.ts,

<a href="www.domain.com/custompage/{{city.id}}" target="_blank">

ou ceci sur your component.html

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

Une autre alternative valable est d'écrire vos propres directives personnalisées. Découvrez-le ici , cette personne a déjà rédigé un exemple d'implémentation de celui-ci.

vous pouvez ajouter target = "_ blank" à votre lien

cela fonctionne pour moi:

 <a routerLink="/News" routerLinkActive="active" target="_blank" rel="bookmark"></a>

J'ai rencontré exactement le même problème et je pense avoir trouvé le meilleur des deux mondes.

Changez votre DIV, SPAN en balises A. Ajoutez le lien href mais gardez le routerLink.

<a routerLink="/custompage/{{city.id}}"  href="/custompage/{{city.id}}" class="badge badge-primary badge-pill">open</a>

Comment cela devrait fonctionner maintenant:

• Clic gauche -> aller à la route / page correspondante sans nouveau rechargement;
• Clic droit -> Ouvrir dans de nouvelles options d'onglet / fenêtre et chargerait naturellement une nouvelle page lors de l'utilisation de cette navigation

Voici une autre façon de faire dans un composant.

<ul *ngFor="let city of cities">
  <li (click)="openCityInNewWindow(city.id)">{{city.name}}</li>
</ul>

Html ressemblera à quelque chose comme

openCityInNewWindow(city) {
  // Converts the route into a string that can be used 
  // with the window.open() function
  const url = this.router.serializeUrl(
    this.router.createUrlTree([`/custompage/${city.id}`])
  );

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