Routeur angulaire 4 et boîte de dialogue modale

Question

J'ai l'application Angular 4 SPA en utilisant un routeur angulaire. Je veux avoir un lien hypertexte qui ouvre un composant dans une nouvelle boîte de dialogue en utilisant Bootstrap 4. Je sais déjà comment ouvrir une boîte de dialogue modale à partir d'une fonction.

Mais comment l'ouvrir en utilisant un lien hypertexte? Je veux laisser mon composant actuel dans et juste montrer le dialogue modal devant lui.

Une autre question - est-ce possible de le faire par programmation? Alors que je peux

this.router.navigate(['/login']); 

et le dialogue modal de connexion est affiché sur le composant actuel?

Des suggestions?

Answer 1

Ma meilleure estimation est que vous pouvez vous abonner à l'itinéraire activé et modifier les paramètres de l'itinéraire pour déclencher le modal.

import { ActivatedRoute, Params } from '@angular/router'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'cmp1', 
    templateUrl: './cmp1.component.html', 
    styleUrls: ['./cmp1.component.css'], 
}) 
export class Cmp1 implements OnInit { 

    constructor(private activatedRoute: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.activatedRoute.params.subscribe(params => { 
      if (params["modal"] == 'true') { 
       // Launch Modal here 
      } 
     }); 
    } 
} 

Je crois que vous auriez alors un lien qui ressemblait quelque chose comme ceci: <a [routerLink]="['/yourroute', {modal: 'true'}]">

meilleurs exemples peuvent être trouvés ici: Route Blog