0

我正在尝试从父组件获取谷歌地图值到我为其创建共享服务的路由组件，如下所示

import {Injectable}     from 'angular2/core';
import {Subject} from "rxjs/Subject";
@Injectable()
export class SearchService {

    private addressmap= new Subject<Sharedcomponent >();

    public searchaddressStream$ = this.addressmap.asObservable();

    broadcastaddressChange(address: Sharedcomponent ) {
        this.addressmap.next(address);
    }
}
export class Sharedcomponent {
    country: string;
    state: string;
    city: string;  
    street: string;
}

从父母那里，我在价值变化时广播这个地址，并通过订阅它在孩子中接收它，并且只有当子页面与父页面一起呈现时，它才能正常工作。如果首先呈现父级，那么我通过路由调用子视图，那么它不会在页面呈现时显示开始时的数据，只有当我再次更改父级中的值时才会显示。子视图正在订阅服务，但在呈现时未获取数据。如果您需要来自父母或查看的更多解释或代码，请告诉我。希望有人可以帮助我。

更新

这是更新，因此您可以了解我的问题，它是我从谷歌地图 api 获取值的应用程序组件

declare var google: any;

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES, ProductComponent],
    providers: [ SearchService]
})


export class AppComponent  {

    constructor(private _http: geoService, private sharedService: SearchService, private cdr: ChangeDetectorRef) {



    }
    ngOnChanges() {
        this.sharedService.broadcastTextChange(this.street);
        this.cdr.detectChanges();
    }
    public maps: geoResult;
    public cat_error: Boolean = false;
    public xml_Latitude :any;
    public xml_Lang: any;
    public city: string;
    public state: string;
    public coutnry: string;
   public street= new SharedService;
    public input: any;
    public autocomplete: any;

    ngOnInit() {
       var instance = this,
       autocomplete;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(res=> {
                instance._http.getPlaces(res.coords.latitude, res.coords.longitude).subscribe(
                    data=> {
                        instance.maps = data;
                        console.log(instance.maps);
                        var result = instance.maps.status;
                        var result2 = instance.maps.results;
                        if (result != "undefined" || "" || null) {

                            instance.setValue(result2[0].address_components[6].long_name, result2[0].address_components[5].long_name, result2[0].address_components[4].long_name);
                        }

                    });
            });
        }
        instance.input = document.getElementById('google_places_ac');
        autocomplete = new google.maps.places.Autocomplete(instance.input, { types: ['(cities)']});
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace(); console.log(place);
            if (place.address_components[3] != undefined ) {
                instance.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name);
            } else
            {
                instance.setValue(place.address_components[2].long_name, place.address_components[1].long_name, place.address_components[0].long_name);
            }
        });



    }


    setValue(a, b, c) {

        this.street.country = a;
        this.street.state = b;
        this.street.city = c;
        this.sharedService.broadcastTextChange(this.street);

    }


}

后来我有一个获得这个值的子视图

  ngOnInit() {


        this.getNewProduct();
        this.getlocation();


   }
    getlocation() {
        this.shared.searchTextStream$.subscribe(
            text => {
                this.street = text;
                this.country = this.street.country;
                this.state = this.street.state;
                this.city = this.street.city
                console.log(this.country, this.state, this.city);
            }, error=> { console.log(<any>error);}
        );
    }



    getNewProduct() {

        this._productService.selectproduct(0)
            .subscribe(
            product  => {
                this.model = product;

                this.isloading = false;
            console.log(this.model)
            },
            error => this.errorMessage = <any>error);

    }

}

但是当这个视图被渲染时我没有得到地理定位，如果我改变父文本框中的值，那么它会在视图中更新

4

2 回答 2

1

如果你想收听最后一个广播，即使你还没有订阅，你也需要使用BehaviorSubject代替Subject. 在这种情况下，即使您在广播后订阅，您也将获得最后一次更新。这是您当前的情况 此代码来自GithubRxJS的存储库

BehaviorSubject只给你最后一个值。如果您需要最后 10 或 2 个值，请ReplaySubject改用。

    /*
 * BehaviorSubject
 *
 * Subject that remembers the last (or initial) value
 */

var xs = new Rx.BehaviorSubject()
xs.subscribe(logAllObserver('BehaviorSubject'))
//=> BehaviorSubject - Value: undefined

var xs = new Rx.BehaviorSubject('default')
xs.subscribe(logAllObserver('BehaviorSubject'))
//=> BehaviorSubject - Value: default

var xs = new Rx.BehaviorSubject('default')
xs.onNext('new one')
xs.subscribe(logAllObserver('BehaviorSubject'))
//=> BehaviorSubject - Value: new one
于 2016-04-04T10:13:31.910 回答
0 
import {Injectable,EventEmitter}     from 'angular2/core';
import {Subject} from "rxjs/Subject";
@Injectable()
export class SearchService {

   searchaddressStream$:EventEmitter<Sharedcomponent> = new EventEmitter();

    broadcastaddressChange(address: Sharedcomponent ) {
        this.searchaddressStream$.emit(address);
    }
}

ngOnInit() {
        this.getNewProduct();
        // this.getlocation();
}
ngViewAfterInit()
{
   this.getlocation();
}
于 2016-04-04T10:45:50.983 回答