ส่งค่าไปยังอีกส่วนประกอบ

Question 1

ดังนั้นฉันมีโปรแกรมนี้อยู่ในสี่เหลี่ยมที่ไหนตอนนี้ฉันจะอยู่ในนรหัสไปรษณีย์มาจากผู้ใช้และบนคลิกที่ปุ่มมันส่งที่นำเข้าข้อมูลเพื่อนฟังก์ชันที่มันถูกส่งไปเป็นรูปแบบ api นที่จะแปลงเป็น Lat&นานพิกัด เห็นด้านล่างนี้:

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>

เห็นได้ชัดว่านี่เป็นเพียง snippet ของรหัสแต่มันเป็นเพียงพอสำหรับการแสดงวัตถุประสงค์ ต่อไปคือฟังก์ชันกับรูปแบบ api และมันก็กำลังทำงานที่มุมมองไปที่สถานีส่วนประกอบ/หน้า:

กลับบ้านส่วนประกอบ.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"])
        })        
    }
}

ประจำสถานี.ส่วนประกอบ.ts -อย่างที่คุณเห็นอะไรมารึยังเพราะฉันอย่าคิดนิดหน่อยว่าจะทำอย่างไร

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

ตอนนี้มันเกิดขึ้นได้อย่างถูกต้อง ฉันต้องทดสอบ lat และยาวตัวแปรในคอนโซล-ปูมบันทึกแล้วมันจะคืนค่ากลับมาเป็น lat กันมานานแค่สบายดี ปัญหาของฉันคือฉันต้องการจะส่งคน lat และนานค่าไปยังอีกส่วนประกอบ/หน้าที่จะใช้ในการคำนว. ฉันจะไม่โกหกโดยบอกว่าฉันต้อง scoured อินเตอร์เน็ตพยายามจะหาทางทำยังงั้นแต่เห็นได้ชัดว่ามัน isnt เรื่องง่ายเลยสำหรับสี่เหลี่ยมที่ทำอย่างนั้น ใครมีไอเดียอยู่ที่ผ่า lat และนานค่าไปยังอีกส่วนประกอบ/หน้า?

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

และในประจำสถานีของตัวเองส่วนประกอบ.ts คุณสามารถใช้ 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); 
    });
  }
}

และคุณก็สามารถเรียนรู้มากกว่าเรื่องนั้นที่นี่ นำทาง router และ อยู่ที่นี่

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

และในประจำสถานีของตัวเองส่วนประกอบ.ts คุณสามารถใช้ 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); 
    });
  }
}

และคุณก็สามารถเรียนรู้มากกว่าเรื่องนั้นที่นี่ นำทาง router และ อยู่ที่นี่

ฉันเข้าใจบางอย่า 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}}) และตอนนี้มันได้ผล ขอบคุณมาก!! youve ยช่างอัศจรรย์!!
gald ฉันสามารถช่วยฉันปรับปรุงคำตอบ
และคุณสามารถคลิกที่ยอมรับคำตอบปุ่ม:)
ขอโทษสำหรับเรื่องนั้น ยังใหม่อย่างนั้น มันทำ:)ขอบคุณอีกครั้ง!!

ส่งค่าไปยังอีกส่วนประกอบ

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่