Passar valores para outro componente de

Question 1

Então, eu tenho este programa angular onde até agora eu levar em um código postal de um usuário e clique no botão enviar a entrada para uma função onde ele é enviado para uma api para converter em Lat e Long coordenadas. veja abaixo:

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 é apenas um trecho do código, mas é suficiente para fins de exibição. em seguida é a função de api e, em seguida, muda o modo de exibição para as estações de componentes/página:

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

estações.componente.ts - como você pode ver nada aqui ainda, porque eu não consigo descobrir o que fazer

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

agora isso tudo funciona corretamente. eu testei a lat e long variáveis no console-log e ele retorna a lat e long bem. o meu problema é que eu preciso para enviar a lat e long valor para outro componente/página para ser usados em cálculos. eu não vou mentir dizendo que eu percorri a internet tentando encontrar uma maneira de fazer isso, mas, aparentemente, ele não é fácil angular para fazê-lo. alguém tem alguma idéia sobre a passagem de lat e long valor para outro componente/page?

Question 2

você pode usar o parâmetro de consulta manipulação, como código abaixo ↓

   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 em suas estações.componente.ts você pode usar ActivatedRoute para obter os dados:

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 você pode aprender mais sobre isso aqui guia de roteador e aqui

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

você pode usar o parâmetro de consulta manipulação, como código abaixo ↓

   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 em suas estações.componente.ts você pode usar ActivatedRoute para obter os dados:

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 você pode aprender mais sobre isso aqui guia de roteador e aqui

eu recebo algum squigglys sob o dataLat: lat e o erro diz: 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 eu usei os links que você deu para adicionar queryParams: para o interior do this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) e agora ele funciona. muito obrigado!! você foi incrível!!
desculpem por isso. ainda novo para ISSO. seu feito :) obrigado mais uma vez!!

Passar valores para outro componente de

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria