Question

我正在尝试将两个数据（数字）从一个组件传递到另一组件。我可以发送数据，并在要使用它们的第二个组件上成功获取此数据。但是，当我想在NgOnInit中使用它们时，似乎无法使用它们。我将添加我的代码。有什么想法吗？

这是我的服务

    import { Component, OnInit} from '@angular/core';
    import {StreetviewService} from '../../services/streetview.service';

    @Component({
    selector: 'app-googlemaps',
    templateUrl: './googlemaps.component.html',
    styleUrls: ['./googlemaps.component.scss']
    })
    export class GooglemapsComponent implements OnInit {

    latt:number=0;

    constructor(public streetviewService:StreetviewService)
    {}

    // I am getting data from HTML selector

    onClickStreetview(lat){
    console.log(lat); 
    this.latt=lat;
    this.passStreetviewLat(this.latt);
    }

    passStreetviewLat(latt){
    this.streetviewService.sendLatToStreetview(latt);
    console.log("I have sent latt right now... "+latt);
    }

这里是第一个组成部分

    import { Component, OnInit, ViewChild, Input, Inject, PLATFORM_ID, Output                         
    } from '@angular/core';
    import { MapsAPILoader } from '@agm/core';
    import { isPlatformBrowser } from '@angular/common';
    import {StreetviewService} from '../../services/streetview.service';
    import {DataService} from '../../services/data.service';

    @Component({
    selector: 'app-streetview',
    templateUrl: './streetview.component.html',
    styleUrls: ['./streetview.component.scss']
    })
    export class StreetviewComponent implements OnInit {
      @ViewChild('streetviewMap') streetviewMap: any;
      @ViewChild('streetviewPano') streetviewPano: any;
       public latt:number;
       public lonn:number;
       public lat:number;
       public lon:number;
      @Input() zoom: number = 11;
      @Input() heading: number = 34;
      @Input() pitch: number = 10;
      @Input() scrollwheel: boolean = false;
      newcenter:any=
      {lat:52.2296756,
        lon:21.012228700000037,
        zoom:14 }; 

      constructor( public streetviewService: StreetviewService,public                 
     dataService: DataService, @Inject(PLATFORM_ID) private platformId:         
     Object, private mapsAPILoader: MapsAPILoader ){

    this.streetviewService.StreetviewLatSubject.subscribe((receivedData)=>
    {this.latt=receivedData

    // Here we can see data !

    console.log("Right now we will see streetview Latitude: "+this.latt) })
      }

      ngOnInit() {

        console.log(this.latt) // Here shows that it is undefined !

        if(isPlatformBrowser(this.platformId)){
          this.mapsAPILoader.load().then(() => {
            let center = { lat:this.latt, lng: this.lonn };
            let map = new window['google'].maps.Map(this.streetviewMap.nativeElement, { center:center, zoom: this.zoom, scrollwheel: this.scrollwheel });
            let panorama = new window['google'].maps.StreetViewPanorama(
              this.streetviewPano.nativeElement, {
                position: center,
                pov: { heading: this.heading, pitch: this.pitch },
                scrollwheel: this.scrollwheel
              });
              map.setStreetView(panorama);
            });
          }


         }

    }

这是我的第二部分

xAxes

Answer 1

这是异步请求的典型问题。您的服务订阅是一个异步请求。

从加载组件的时间线的角度来看，构造函数和ngOnInit几乎是准时地处理的。因此，虽然服务订阅中的console.log（）仍在等待返回值，但ngOnInit中的console.log（）已经启动。并且目前this.latt尚未定义。

    @Component({
    selector: 'app-streetview',
    templateUrl: './streetview.component.html',
    styleUrls: ['./streetview.component.scss']
    })
    export class StreetviewComponent implements OnInit {

      constructor(){
          this.streetviewService.StreetviewLatSubject.subscribe((receivedData)=>
      {
       this.latt=receivedData;
       console.log("I was received asynchronously: " + this.latt) })
      }

      ngOnInit() {
         console.log('I don't care when the streetviewService returns its value: ' + this.latt);
      }

如果您这样做，将会发生同样的事情：

 ngOnInit(): void {   
    this.streetviewService.StreetviewLatSubject.subscribe((receivedData)=>
    {
       this.latt=receivedData;
       console.log("I was received asynchronously: " + this.latt) })
    }

    console.log('I don't care when the streetviewService returns its value: ' + this.latt);
}

因此，如果您必须等待数据到达才能继续进行工作流，请从服务订阅中调用后续方法，如下所示：

// inside constructor or ngOnInit
this.streetviewService.StreetviewLatSubject.subscribe((receivedData)=>
    {
       this.latt=receivedData;

       doSomething();
    }

...

private doSomething(): void {
   // do something with this.latt
}

Angular 5 Rxjs服务在NgOnInit中返回数据“未定义”

1 个答案: