Passaggio di valori a un altro componente

Question 1

Così ho questo programma angolare dove finora prendere un codice postale di un utente e fare clic sul pulsante invia l'input di una funzione a cui è inviata ad un api per la conversione in Lat / Long coordinate. vedere di seguito:

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>

chiaramente questo è solo un frammento di codice, ma è abbastanza per scopi di visualizzazione. la prossima è con la funzione api e poi si sposta la vista per le stazioni di componente/pagina:

casa.componente.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"])
        })        
    }
}

le stazioni.componente.ts - come si può vedere nulla, qui perché non riesco a capire cosa fare

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

ora tutto questo funziona correttamente. ho testato la lat e long variabili nella console-log e restituisce la lat e long bene. il mio problema è che ho bisogno di inviare il lat e long valore ad un altro componente/pagina per essere utilizzate nei calcoli. io non mentire dicendo che ho perlustrato internet cercando di trovare un modo per farlo ma a quanto pare non è facile in angolare di farlo. qualcuno ha idee sul passaggio di lat e long valore ad un altro componente/pagina?

Question 2

è possibile utilizzare query di gestione parametri come il muggito del codice ↓

   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}} )
        })        
    }

e nelle stazioni.componente.ts è possibile utilizzare ActivatedRoute per ottenere i dati:

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); 
    });
  }
}

e si può imparare di più circa che qui guida router e qui

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

è possibile utilizzare query di gestione parametri come il muggito del codice ↓

   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}} )
        })        
    }

e nelle stazioni.componente.ts è possibile utilizzare ActivatedRoute per ottenere i dati:

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); 
    });
  }
}

e si può imparare di più circa che qui guida router e qui

ho alcuni squigglys sotto il dataLat: lat e l'errore dice: 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 ho usato il link che hai dato per aggiungere queryParams: all'interno del this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) e ora funziona. grazie mille!! youve stato incredibile!!

Passaggio di valori a un altro componente

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria