传递的价值观的另一个部件

Question 1

所以我有这个程序的角度在迄今为止，我在邮政编码从用户和按一下按钮就发，输入功能在那里被送到一个api转换成经纬度和长坐标。见下文：

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>

显然这只是一段代码，但它是不够显示目的。接下来是功能与api和它然后转移查站的组件/page:

家。组成部分。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 {
  }

}

现在，这一切正常工作。我已经测试过的纬度和长期的变量控制记录和返回的纬度和长就好了。我的问题是我需要送的纬度和长期价值的另一个组成部分/网页应使用在计算。我不会撒谎说我已经走遍了因特网试图找到一种方法来这样做，但显然它并不是容易的角度这样做。任何人有任何想法，通过纬度和长期价值的另一个组件/page?

Question 2

你可以使用的查询参数处理像以下代码↓

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

你可以了解更多有关在这里的导游路由器和这里

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

你可以使用的查询参数处理像以下代码↓

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

你可以了解更多有关在这里的导游路由器和这里

我得到一些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'.
非易失存储器我使用的链接你给加 queryParams: 到里面的 this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) 现在它的工作。谢谢你这么多！你已经惊人的！

传递的价值观的另一个部件

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别