RouterLink dans ma popup

Version imprimable

27/04/2022, 14h48
AlexandreJcpn

1 pièce(s) jointe(s)

RouterLink dans ma popup

Bonjour à tous,

Je suis actuellement entrain réaliser un exercice et je suis bloqué, pourriez vous m'aiguiller s'il vous plait ?

Le problème : Quand je clique sur mon marqueur, ma popup s'ouvre correctement avec les données que je souhaite, jusque la pas de problème. Mais ensuite je voudrais que mon bouton me renvoi vers mon formulaire sur une autre page et la je ne comprend ça ne fonctionne pas. Après avoir cherché de mon côté je viens vers vous pour m'aider a me débloquer.
Je vous met une capture de mon code.

Pièce jointe 618112

En esperant qu'une personne pourra m'aider.

Cordialement,
Alexandre
27/04/2022, 19h34
krakatoa

le marker fait partie de google maps
le code html que tu y met fait partie de google maps et non d'angular

donc le routerlink ne fonctionnera pas

faut plutot utiliser du html classique avec un href
28/04/2022, 11h26
AlexandreJcpn

Merci pour l'information Krakatoa mais comment dois je m'y prendre ?
Dois-je mettre le popup dans le fichier html aussi ou je peux laisser le popup dans le fichier ts et ajouter la partie intérieur du popup dans le fichier html ?
Je comprend pas trop la manière dont il faut s'y prendre.
En espérant que vous pourriez m'éclairer un peu plus sur le sujet.

Cordialement,
Alexandre

tu peux mettre le code avec la balise #

tu peux essayer ce code :

(1)
Code:

1 2 3 4 .on('click', () => { console.log('click !!!!!!!!') });
à quel moment click !!! s'affiche dans la console ?
clic sur le bouton ou sur le marqueur ou les 2 ?

(2)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .bindPopur(' <button (click)="clickMark()">......</button> ') .on('click', () => { console.log('click !!!!!!!!') }); clickMark() { console.log('clickMark !!!') }
clickMark !!! s'affiche dans la console ?

28/04/2022, 14h42
AlexandreJcpn

Pour le (1), le click s'affiche dans la console quand je clique sur le marqueur.
Pour le (2), ça ne fonctionne pas.

Mais je ne vois pas la ou vous voulez en venir ?

Mon but étant de faire fonctionner mon bouton "Réserver un vélo" et me rediriger vers une autre page.

Bien cordialement,
Alexandre

(1) et pas sur le bouton ?

(3)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bindPopur('
 
  <button id="toto">......</button>
')
.on('click', () => {
 
});
...
...
document.getElementById ("toto") .addEventListener('click',function ()
{
    console.log("test3");
 
    this.router.navigate(['/ma-page', { id: heroId }]);  // exemple avec paramètre
});

28/04/2022, 16h31
AlexandreJcpn

Non pas sur le bouton. Ça m'embête car c'est un service et je n'ai donc pas de fichier html qui correspond au service. Enfin je suis un peu perdu la. C'est dommage parce qu'il me reste plus qu'a trouver cette solution pour terminer mon exercice. :arf:

Je vais essayer ce que vous venez de m'envoyer, merci encore

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.bindPopur('
 
<button id="toto">......</button>
')
.on('click', () => {
 
});
...
...
document.getElementById ("toto") .addEventListener('click',function ()
{
console.log("test3");
 
this.router.navigate(['/ma-page', { id: heroId }]); // exemple avec paramètre
});

faudra nommer dynamiquement les id des markeurs car ils ne peuvent pas s'appeller tous "toto"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
public makeStationMarkers(map: L.Map): void {
    fetch('https://api.jcdecaux.com/vls/v1/stations?contract=cergy-pontoise&apiKey=c90a137bb16a557c0dc0362a3606b71ce06515fe')
    .then((resp) => resp.json())
    .then(function(data) {
      for(let coords of data){
        L.marker([coords.position.lat, coords.position.lng])
        .bindPopup(`
          <h3>${coords.name}</h3>
          <p>${coords.address}</p>
          <p>${coords.available_bikes}</p>
          <button id="toto" routerLink="/app-form" class="btn">Réserver un vélo</button>
        `)
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
        }).addTo(map);
      }
    });
    document.getElementById("toto")?.click();
  }
}

Ça ne fonctionne toujours pas au click sur le boutton

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
public makeStationMarkers(map: L.Map): void {
    fetch('https://api.jcdecaux.com/vls/v1/stations?contract=cergy-pontoise&apiKey=c90a137bb16a557c0dc0362a3606b71ce06515fe')
    .then((resp) => resp.json())
    .then(function(data) {
      for(let coords of data){
        L.marker([coords.position.lat, coords.position.lng])
        .bindPopup(`
          <h3>${coords.name}</h3>
          <p>${coords.address}</p>
          <p>${coords.available_bikes}</p>
          <button id="toto">Réserver un vélo</button>
        `)
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
        }).addTo(map);
      }
    });
    document.getElementById("toto") ?.addEventListener('click', function(){
      console.log("test3");
      this.router.navigate(['/app-form', {id: this.id}]);
    });
  }
}

Il ne reconnait "router"

Je me demande si je vais réussir à le résoudre ce problème.
En tout cas je vous en remercie beaucoup malgré qu'on est pas trouvé la solution pour le moment

tu as bien mis :

Code:

1
2
 
  constructor(private router: Router) { }

et essaye ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public makeStationMarkers(map: L.Map): void {
    const that = this;

    fetch('https://api.jcdecaux.com/vls/v1/stations?contract=cergy-pontoise&apiKey=c90a137bb16a557c0dc0362a3606b71ce06515fe')
    .then((resp) => resp.json())
    .then(function(data) {
      for(let coords of data){
        L.marker([coords.position.lat, coords.position.lng])
        .bindPopup(`
          <h3>${coords.name}</h3>
          <p>${coords.address}</p>
          <p>${coords.available_bikes}</p>
          <button id="toto">Réserver un vélo</button>
        `)
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
        }).addTo(map);
      }
    });
    document.getElementById("toto") ?.addEventListener('click', function(){
      console.log("test3");
      that.router.navigate(['/app-form', {id: this.id}]);
    });
  }
}

Cette fois ci plus d'erreur dans le code, merci pour le router je l'avais oublié.. mais quand je clique sur 'réserver un vélo' ça ne réagit toujours pas dans l'inspecteur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
export class MarkerService {
  constructor(private http: HttpClient, private router:Router) { }
 
  public makeStationMarkers(map: L.Map): void {
    const that = this;
 
    fetch('https://api.jcdecaux.com/vls/v1/stations?contract=cergy-pontoise&apiKey=c90a137bb16a557c0dc0362a3606b71ce06515fe')
    .then((resp) => resp.json())
    .then(function(data) {
      for(let coords of data){
        L.marker([coords.position.lat, coords.position.lng])
        .bindPopup(`
          <h3>${coords.name}</h3>
          <p>${coords.address}</p>
          <p>${coords.available_bikes}</p>
          <button id="toto">Réserver un vélo</button>
        `)
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
        }).addTo(map);
      }
    });
    document.getElementById("toto") ?.addEventListener('click', function(){
      console.log("test3");
      that.router.navigate(['app-bookink', {id: this.id}]);
    });
  }
}

02/05/2022, 16h51
krakatoa

"test3' s'affiche ou pas ?
02/05/2022, 17h01
AlexandreJcpn

Merci pour votre réactivité.

Non, il ne s'affiche pas.

peut etre comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
 
          document.getElementById("toto") ?.addEventListener('click', function(){
            console.log("test3");
            that.router.navigate(['app-bookink', {id: this.id}]);
          });
        }).addTo(map);
      }
    });
 
  }

sinon met ton probleme sur stackoverflow
traduit avec un traducteur anglais si tu n'es pas doué in english

il y a aussi la chaine angular sur discord

02/05/2022, 17h37
AlexandreJcpn

Génial !!!!
Merci beaucoup, j'arrive enfin sur la page de mon formulaire :)

Bonjour,
au moment où le script exécute cette ligne :

Code:

document.getElementById("toto") ?.addEventListener('click', function(){

ton élément bouton n'existe pas encore, l'utilisation du chaînage optionnel ?. évite les erreurs mais n'aide pas forcément à avoir une vision correcte de ce qui se passe !

La méthode qui est proposée est un pis-aller car à chaque fois que l'on va cliquer sur la popup il va se rajouter un événement sur le bouton.

Une méthode plus simple serait d'utiliser le paramètre event passer à le fonction lors du click, quelque chose comme :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 for (let coords of data) { const marker = L.marker([coords.position.lat, coords.position.lng]) .bindPopup(` <h3>${coords.name}</h3> <p>${coords.address}</p> <p>${coords.available_bikes}</p> <button id="toto">Réserver un vélo</button> `) .on('click', () => { map.flyTo([coords.position.lat, coords.position.lng]); }) .addTo(map); // une façon de gérer la popup // ouvre la popup pour que le DOM la construise et la récupère const popup = marker.openPopup().getPopup(); // on la referme marker.closePopup(); // affectation de l'événement sur le HTMLElement L.DomEvent.on(popup.getElement(), "click", (event) => { if ("BUTTON" == event.target.tagName) { that.router.navigate(['app-bookink', { id: this.id // Attention à la valeur de l'ID avec this }]); } }); }
... accessoirement cela évite les ID dupliquées !

Une autre bonne solution serait de créer un composant popup, cela doit même déjà exister en Angular.

[Edit] correction du code pour qu'il soit fonctionnel dans le contexte décrit

03/05/2022, 12h03
NoSmoking

:oops:
j'ai corrigé le code pour qu'il soit fonctionnel, normalement, dans le contexte décrit, j'avais fait un peu trop de raccourci !
:fessee:
03/05/2022, 13h15
krakatoa

merci, ça peut etre utile !
06/05/2022, 11h32
AlexandreJcpn

Merci beaucoup pour cette solution