Pasar valores a otro componente

Question 1

Así que tengo este programa en angular, en donde hasta ahora puedo tomar en un código postal de un usuario y haga clic en el botón envía esta entrada para una función donde es enviado a una api para convertir en Lat y Long coordenadas. ver a continuación:

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>

claramente este es sólo un fragmento de código, pero es suficiente para los fines de la presentación. la siguiente es la función de la api y, a continuación, cambia la vista a las estaciones de componente/página:

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

de las estaciones.componente.ts - como se puede ver nada aquí porque yo no puedo averiguar qué hacer

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

ahora esta todo funciona correctamente. he probado la lat y long variables en la consola de registro y devuelve el lat y long bien. mi problema es que tengo que enviar el lat y long valor a otro componente/página para ser utilizado en los cálculos. no me voy a mentir diciendo que he recorrido el internet tratando de encontrar una manera de hacerlo, pero al parecer no es fácil, en angular para hacerlo. alguien tiene alguna idea sobre el paso de la lat y long valor a otro componente/página?

Question 2

puede utilizar el parámetro de la consulta, el manejo de fuelle código ↓

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

y en sus estaciones.componente.ts puede utilizar ActivatedRoute para obtener los datos:

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

y usted puede aprender más acerca de que aquí la guía de router y aquí

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

puede utilizar el parámetro de la consulta, el manejo de fuelle código ↓

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

y en sus estaciones.componente.ts puede utilizar ActivatedRoute para obtener los datos:

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

y usted puede aprender más acerca de que aquí la guía de router y aquí

tengo algo de squigglys bajo el dataLat: lat y el error 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 he utilizado los enlaces que dio a agregar queryParams: en el interior de la this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) y ahora funciona. muchas gracias!! ha sido increíble!!
y puede usted haga clic en el aceptar botón de la respuesta :)
lo siento por eso. todavía nuevo para ASÍ. de su hacer :) gracias de nuevo!!

Pasar valores a otro componente

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría