Absolvovanie hodnoty iné zložky

Question 1

Tak som si tento program v uhlovej, kde doteraz som sa v zip kód od používateľa, a na tlačidlo odošle že vstup na funkciu, kde je vylúčený na api previesť do Lat & Dlho súradnice. pozrite sa nižšie:

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>

jasné, že to je len útržok kódu, ale to je dosť pre zobrazenie účely. ďalej je funkcia s api a potom sa prepne na zobrazenie staníc component/page:

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

stanice.komponent.ts - ako môžete vidieť, nič tu ale preto nemôžem prísť na to, čo robiť

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

teraz to všetko funguje správne. testoval som lat a dlho premenných v konzole-denník a vráti lat a dlho v pohode. môj problém je, že som musieť poslať lat a dlho hodnotu na iné component/page byť použité pri výpočtoch. nebudem klamať vyslovením som prehľadali internet sa snaží nájsť spôsob, ako to urobiť, ale zrejme to nie je ľahké, v uhlové, aby tak urobili. niekto nejaké nápady na absolvovanie lat a dlho hodnotu na iné component/page?

Question 2

môžete použiť parameter dopytu manipulácia ako kód nižšie ↓

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

a vo vašich staníc.komponent.ts môžete použiť ActivatedRoute získať údaje:

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

a môžete sa dozvedieť viac o tom tu sprievodca router a tu

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

môžete použiť parameter dopytu manipulácia ako kód nižšie ↓

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

a vo vašich staníc.komponent.ts môžete použiť ActivatedRoute získať údaje:

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

a môžete sa dozvedieť viac o tom tu sprievodca router a tu

som si niektoré squigglys pod dataLat: lat a chyba hovorí: 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 som použil odkazy, ktoré vám dal pridať queryParams: vo vnútri this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) a teraz to funguje. ďakujem moc!! máš boli úžasné!!
je nám to ľúto. stále nové a TAK. jeho hotovo :) ešte raz vďaka!!

Absolvovanie hodnoty iné zložky

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii