Valorile care trec de la o altă componentă

Question 1

Deci am acest program în unghiulare în cazul în care atât de departe ajung într-un cod poștal de la un utilizator și faceți clic pe butonul se trimite ca intrare pentru o funcție în cazul în care acesta este trimis la un api pentru a converti în Lat si Lung coordonate. a se vedea mai jos:

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>

în mod evident acesta este doar un fragment de cod, dar este suficient pentru scopuri de afișare. următorul este funcția cu api și apoi se mută vedere la stațiile component/pagina:

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

posturi.componenta.ts - după cum puteți vedea nimic încă aici pentru că nu pot da seama ce să fac

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

acum totul funcționează corect. am testat lat și lung variabile în consolă-log și se întoarce lat și mult bine. problema mea este am nevoie pentru a trimite lat și lung valoarea pentru un alt component/pagina pentru a fi utilizate în calcule. am obiceiul să mint spunând că am căutat pe internet încearcă să găsească o modalitate de a face acest lucru, dar se pare că nu-i ușor în unghiulare să facă acest lucru. are cineva vreo idee pe trecerea de lat și lung valoarea pentru un alt component/pagina?

Question 2

puteți utiliza parametru de interogare de manipulare ca mai jos codul ↓

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

și în stații.componenta.ts puteți utiliza ActivatedRoute pentru a obține date:

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

și puteți afla mai multe despre asta aici ghidul router si aici

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

puteți utiliza parametru de interogare de manipulare ca mai jos codul ↓

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

și în stații.componenta.ts puteți utiliza ActivatedRoute pentru a obține date:

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

și puteți afla mai multe despre asta aici ghidul router si aici

am unele squigglys sub dataLat: lat și eroare spune: 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 am folosit link-uri ai dat add queryParams: în interiorul this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) și acum funcționează. vă mulțumesc foarte mult!!!! ai fost uimitor!!
îmi pare rău despre asta. încă nou la LUCRU. sa terminat :) multumesc din nou!!

Valorile care trec de la o altă componentă

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie