La transmission de valeurs à un autre composant

Question 1

J'ai donc ce programme angulaire où jusqu'à présent je prends en un code postal à partir d'un utilisateur et cliquez sur le bouton, il envoie cette entrée à une fonction où il est envoyé à une api pour convertir en Lat et Long coordonnées. voir ci-dessous:

home.component.html

<div class="center" style="margin-top:50px;">
        <label for="ZipCode"><b>Zip Code</b></label>        
    </div>

    <div class="center">
        <input name="zipcode" #zipcode id="zipcode" type="text" placeholder="Enter Zip Code" maxlength="5">
    </div>
<div class="center" style="margin-top:100px;">
        <button class="button button1" (click)="getCoords(zipcode.value)" ><b>Retrieve Data</b></button>
    </div>

clairement ce n'est qu'un extrait du code, mais il est suffisant pour les besoins de l'affichage. suivant est la fonction de l'api et puis, il déplace le point de vue de stations composant/page:

la maison.composante.ts

export class HomeComponent implements OnInit {
    
    constructor(
        private router: Router
    ){}

    ngOnInit(): void {
    }

    getCoords(val: any){
        var url = "http://www.mapquestapi.com/geocoding/v1/address?key=MYKEY&location=" + val;

        fetch(url)
        .then((res) => res.json())
        .then((data) => {
            var lat = data.results[0].locations[0].displayLatLng.lat;
            var long = data.results[0].locations[0].displayLatLng.lng;

            this.router.navigate(["/stations"])
        })        
    }
}

les stations.composante.ts - comme vous pouvez le voir rien ici encore parce que je ne peux pas comprendre quoi faire

import { Component, Input, OnInit } from '@angular/core';


@Component({
  selector: 'app-stations',
  templateUrl: './stations.component.html'
})

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

maintenant ça fonctionne correctement. j'ai testé la lat et long variables dans la console de log et il retourne la lat et long amende juste. mon problème est que j'ai besoin d'envoyer de la lat et long valeur à un autre composant/page pour être utilisé dans les calculs. je ne vais pas mentir en disant que j'ai parcouru l'internet à essayer de trouver un moyen de le faire, mais apparemment il n'est pas facile dans angulaire de le faire. n'importe qui ont des idées sur le transfert de la lat et long valeur à un autre composant/page?

Question 2

vous pouvez utiliser la requête de gestion des paramètres comme ci-dessous code ↓

   getCoords(val: any){
        var url = "http://www.mapquestapi.com/geocoding/v1/address?key=MYKEY&location=" + val;

        fetch(url)
        .then((res) => res.json())
        .then((data) => {
            var lat = data.results[0].locations[0].displayLatLng.lat;
            var long = data.results[0].locations[0].displayLatLng.lng;

            this.router.navigate(["/stations"], {queryParams :{ dataLat : lat, dataLong : long}} )
        })        
    }

et dans vos stations.composante.ts vous pouvez utiliser ActivatedRoute pour obtenir les données:

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


@Component({
  selector: 'app-stations',
  templateUrl: './stations.component.html'
})

export class StationsComponent implements OnInit {
  
  getLat:any;
  getLong:any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.getLat = params.dataLat;
      this.getLong = params.dataLong;
      console.log(params); 
    });
  }
}

et vous pouvez en apprendre plus à ce sujet ici guide routeur et ici

Nicho · Answer 1 · 2021-11-22T01:14:08

vous pouvez utiliser la requête de gestion des paramètres comme ci-dessous code ↓

   getCoords(val: any){
        var url = "http://www.mapquestapi.com/geocoding/v1/address?key=MYKEY&location=" + val;

        fetch(url)
        .then((res) => res.json())
        .then((data) => {
            var lat = data.results[0].locations[0].displayLatLng.lat;
            var long = data.results[0].locations[0].displayLatLng.lng;

            this.router.navigate(["/stations"], {queryParams :{ dataLat : lat, dataLong : long}} )
        })        
    }

et dans vos stations.composante.ts vous pouvez utiliser ActivatedRoute pour obtenir les données:

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


@Component({
  selector: 'app-stations',
  templateUrl: './stations.component.html'
})

export class StationsComponent implements OnInit {
  
  getLat:any;
  getLong:any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.getLat = params.dataLat;
      this.getLong = params.dataLong;
      console.log(params); 
    });
  }
}

et vous pouvez en apprendre plus à ce sujet ici guide routeur et ici

je reçois quelques squigglys en vertu de la dataLat: lat et le message d'erreur indique: Argument of type '{ dataLat: any; dataLong: any; }' is not assignable to parameter of type 'NavigationExtras'. Object literal may only specify known properties, and 'dataLat' does not exist in type 'NavigationExtras'.
nvm j'ai utilisé les liens que vous avez donné à ajouter queryParams: à l'intérieur de la this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) et maintenant ça fonctionne. merci beaucoup!! vous avez été incroyable!!
désolé à ce sujet. encore nouveau pour le faire. c'est fait :) merci encore!!

La transmission de valeurs à un autre composant

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie