गुजर मूल्यों के लिए एक और घटक

Question 1

तो मैं इस कार्यक्रम में कोणीय जहां अब तक मैं एक ज़िप कोड से एक उपयोगकर्ता और बटन पर क्लिक करें यह भेजता है कि इनपुट करने के लिए एक समारोह है, जहां यह भेजा करने के लिए एक एपीआई में परिवर्तित करने के लिए अक्षां और लंबे समय तक निर्देशांक. नीचे देखें:

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>

स्पष्ट रूप से यह केवल एक स्निपेट कोड की लेकिन यह पर्याप्त है प्रदर्शन प्रयोजनों के लिए. अगले समारोह के साथ एपीआई और यह तो परिवर्तन देखने के लिए स्टेशनों घटक/पृष्ठ:

होम.घटक है । टीएस

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

स्टेशनों.घटक है । टीएस - के रूप में आप देख सकते हैं यहाँ कुछ भी नहीं, क्योंकि अभी तक मैं समझ से बाहर क्या करने के लिए

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

अब यह सब सही ढंग से काम करता है. मैं परीक्षण किया है अक्षां और लंबे समय तक चर कंसोल में लॉग इन करें और यह रिटर्न अक्षां और लंबे समय तक बस ठीक है. मेरी समस्या है की मुझे जरूरत है भेजने के लिए अक्षां और लंबे समय से मूल्य के लिए एक और घटक/पृष्ठ करने के लिए हो सकता है की गणना में इस्तेमाल किया. मैं अभ्यस्त झूठ कह कर मैं इंटरनेट scoured है की कोशिश कर रहा करने के लिए एक रास्ता खोजने के लिए ऐसा करते हैं लेकिन जाहिरा तौर पर यह आसान नहीं कोणीय में ऐसा करने के लिए । किसी को भी किसी भी विचार किया है पर गुजर अक्षां और लंबे समय से मूल्य के लिए एक और घटक/पेज?

Question 2

आप उपयोग कर सकते हैं क्वेरी पैरामीटर से निपटने की तरह bellow कोड ↓

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

और में अपने स्टेशनों.घटक है । टीएस आप का उपयोग कर सकते हैं ActivatedRoute डेटा प्राप्त करने के लिए:

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

और आप कर सकते हैं के बारे में अधिक जानें कि यहाँ गाइड रूटर और यहाँ

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

आप उपयोग कर सकते हैं क्वेरी पैरामीटर से निपटने की तरह bellow कोड ↓

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

और में अपने स्टेशनों.घटक है । टीएस आप का उपयोग कर सकते हैं ActivatedRoute डेटा प्राप्त करने के लिए:

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

और आप कर सकते हैं के बारे में अधिक जानें कि यहाँ गाइड रूटर और यहाँ

मैं कुछ squigglys के तहत dataLat: lat और त्रुटि कहते हैं: 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 मैं आप लिंक दे दिया करने के लिए जोड़ें queryParams: के अंदर करने के लिए this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) और अब यह काम करता है. बहुत बहुत धन्यवाद!! तुम अद्भुत किया गया है!!
gald मैं मदद कर सकता है, मैं अद्यतन के जवाब.
और आप कर सकते हैं पर क्लिक करें स्वीकार जवाब बटन :)
खेद है कि के बारे में. अभी भी नया करने के लिए तो । अपनी किया :) एक बार फिर धन्यवाद!!

गुजर मूल्यों के लिए एक और घटक

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में