将值传递给另一个组件

Posted 2023-02-23

【中文标题】将值传递给另一个组件

【英文标题】：Passing values to another component

【发布时间】：2021-12-31 16:36:53

【问题描述】：

所以我有这个程序的角度，到目前为止，我从用户那里获取一个邮政编码，然后点击按钮，它将输入发送到一个函数，在那里它被发送到一个 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>

显然，这只是代码的 sn-p，但足以用于显示目的。接下来是带有 api 的函数，然后它将视图转移到站组件/页面：

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 变量，它返回 lat 和 long 就好了。我的问题是我需要将经纬度值发送到另一个组件/页面以用于计算。我不会撒谎说我已经搜索了互联网试图找到一种方法，但显然这样做并不容易。有人对将 lat 和 long 值传递给另一个组件/页面有任何想法吗？

【参考方案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 和 here

【讨论】：

我在dataLat: lat 下得到了一些 squigglys，错误显示：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) 的内部，现在它可以工作了。太感谢了！！你太棒了！

我可以帮忙，我更新答案。

你能点击接受答案按钮吗:)

对此感到抱歉。 SO还是新手。完成了：）再次感谢！