Předávání hodnot do jiné složky

Question 1

Tak jsem si tento program v úhlové, kde tak daleko jsem se ve směrovací číslo od uživatele, a klikněte na tlačítko vysílá, že vstup do funkce, kde je odeslána z rozhraní api, převést do Lat Long & souřadnice. viz níže:

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ě to je jen fragment kódu, ale to je dost pro účely zobrazení. další je funkce s api a to pak posune do zobrazení stanic komponenty/stránky:

domů.komponenta.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.komponenta.ts - jak můžete vidět, nic ještě tady, protože nemůžu přijít na to, co dělat

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

teď to všechno funguje správně. testoval jsem lat a dlouhé proměnných v console-log a vrátí lat a dlouho v pohodě. můj problém je, že potřebuju poslat lat a dlouhé hodnotu pro další komponenty/stránky mají být použity ve výpočtech. nebudu lhát, že jsem prohledali internet se snaží najít způsob, jak to udělat tak, ale zřejmě to není snadné v úhlové, aby tak učinily. máte někdo nějaké nápady na absolvování lat a dlouhé hodnotu pro další složkou/stránka?

Question 2

můžete použít parametr dotazu manipulace jako kód níže ↓

   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 ve své stanice.komponenta.ts můžete použít ActivatedRoute získat data:

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 se dozvědět více o tom zde průvodce router a tady

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

můžete použít parametr dotazu manipulace jako kód níže ↓

   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 ve své stanice.komponenta.ts můžete použít ActivatedRoute získat data:

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 se dozvědět více o tom zde průvodce router a tady

dostanu nějaké squigglys pod dataLat: lat a chyba říká, že: 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 použil jsem odkazy co jsi dal přidat queryParams: uvnitř this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) a teď to funguje. děkuji moc!! byl jsi úžasný!!
omlouvám se za to. stále nové. jeho práce :) ještě jednou díky!!

Předávání hodnot do jiné složky

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii