Передача значений другому компоненту

Question 1

Итак, у меня есть эта программа в angular, где до сих пор я беру почтовый индекс от пользователя, и при нажатии кнопки он отправляет этот ввод в функцию, где он отправляется в api для преобразования в координаты Lat и Long. смотреть ниже:

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, и затем она переключает представление на компонент/страницу станции:

главная страница.компонент.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 на другой компонент/страницу для использования в расчетах. я не буду лгать, говоря, что я рыскал по Интернету, пытаясь найти способ сделать это, но, по-видимому, в angular это нелегко сделать. у кого-нибудь есть какие-либо идеи по передаче значения lat и long другому компоненту/странице?

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

и в вашем файле station.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); 
    });
  }
}

и вы можете узнать больше об этом здесь, в руководстве маршрутизатора и здесь

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

и в вашем файле station.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); 
    });
  }
}

и вы можете узнать больше об этом здесь, в руководстве маршрутизатора и здесь

у меня есть несколько закорючек под 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}}) и теперь это работает. большое вам спасибо!! ты была потрясающей!!
галд, я могу помочь, я обновляю ответ.
и можете ли вы нажать кнопку "Принять ответ":)
извини за это. все еще новичок в этом. все сделано :) еще раз спасибо!!

Передача значений другому компоненту

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории