값을 전달하는 또 다른 구성 요소

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>

명확하게 이것은 단지 조각의 코드 하지만 충분히 화면에 표시됩니다. 다음은 기능을 가진 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 및 장 값을 다른 구성 요소/페이지를 사용합니다. 나는 거짓말을 말해서 저는 인터넷 방법을 찾기 위해 노력하고 그렇게 하지만 분명히 그것은 밤에서 쉽 모니다. 사람이 어떤 아이디어에 전달하 lat 및 장 값을 다른 구성 요소/페이지?

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'.
nvm 내가 사용하는 링크를 준 추가 queryParams: 게의 내부는 this.router.navigate(["/stations"], {queryParams: { dataLat : lat, dataLong : long}}) 그리고 지금 그것을 작동합니다. thank you so much!! 당신은 되었습니다 놀랍습니다!
gald 이다 내가 도울 수 있는,나는데 대답이다.
죄송합니다. 여전히 새로운다. 어:)다시 한번 감사드립니다!!

값을 전달하는 또 다른 구성 요소

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리