将值传递给另一个组件

Question

所以我在 angular 中有这个程序，到目前为止我从用户那里获取邮政编码并单击按钮，它将输入发送到一个函数，然后发送到 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 的函数，然后它将视图转移到站点 component/page:

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

stations.component.ts - 你在这里什么也看不到，因为我不知道该怎么做

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


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

export class StationsComponent implements OnInit {
  

  ngOnInit(): void {
  }

}

现在一切正常。我已经在控制台日志中测试了 lat 和 long 变量，returns lat 和 long 就好了。我的问题是我需要将纬度和经度值发送到另一个 component/page 以用于计算。我不会撒谎说我已经搜索了互联网试图找到这样做的方法，但显然 angular 这样做并不容易。任何人对将纬度和经度值传递给另一个有任何想法 component/page?

Answer 1

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

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

并且在您的 stations.component.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); 
    });
  }
}

您可以在此处了解更多信息 guide router and here

将值传递给另一个组件

Passing values to another component

components

typescript

angular