Değerleri başka bir bileşene geçirme

Question 1

Bu yüzden şu ana kadar bir kullanıcıdan bir posta kodu aldığım angular'da bu programa sahibim ve düğmeye tıklandığında, bu girişi bir apı'ye gönderildiği bir işleve gönderir. Enlem ve Uzun koordinatlara dönüştürmek için. aşağıya bakınız:

ev.bileşen.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>

açıkçası, bu sadece kodun bir snippet'idir, ancak görüntüleme amaçları için yeterlidir. sonraki apı ile işlevdir ve daha sonra görünümü istasyonlar bileşenine/sayfasına kaydırır:

ev.bileşen.TH

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

yerler.bileşen.ts-burada henüz hiçbir şey göremediğin için ne yapacağımı anlayamıyorum

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

şimdi her şey düzgün çalışıyor. konsol günlüğündeki lat ve long değişkenlerini test ettim ve lat ve long'u gayet iyi döndürüyor. benim sorunum, hesaplamalarda kullanılacak lat ve long değerini başka bir bileşene/sayfaya göndermem gerektiğidir. bunu yapmanın bir yolunu bulmaya çalışırken interneti taradığımı söyleyerek yalan söylemeyeceğim ama görünüşe göre bunu yapmak açısal olarak kolay değil. lat ve long değerini başka bir bileşene/sayfaya geçirme konusunda herhangi bir fikri olan var mı?

Question 2

sorgu parametrelerinin işlenmesini aşağıdaki kod gibi kullanabilirsiniz:

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

ve istasyonlarınızda.bileşen.ts verileri almak için activatedroute'u kullanabilirsiniz:

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

ve bu kılavuz yönlendirici hakkında daha fazla bilgi edinebilirsiniz ve burada

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

sorgu parametrelerinin işlenmesini aşağıdaki kod gibi kullanabilirsiniz:

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

ve istasyonlarınızda.bileşen.ts verileri almak için activatedroute'u kullanabilirsiniz:

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

ve bu kılavuz yönlendirici hakkında daha fazla bilgi edinebilirsiniz ve burada

altında birkaç squiggly var. dataLat: lat ve hata diyor ki: 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 eklemek için verdiğiniz bağlantıları kullandım queryParams: içine doğru this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) ve şimdi işe yarıyor. çok teşekkür ederim!! harikaydın!!
özür dilerim bu konuda. SO için hala yeni. yine onun sayesinde bitti:)!!

Değerleri başka bir bileşene geçirme

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride