[英]change detection not working on routed page when first rendered in angular2
我正在尝试从父组件获取google maps值到我为其创建了共享服务的路由组件
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;
}
从父级开始,我正在广播此地址的值更改,并通过订阅该地址将其接收到子级,并且仅当子级页面由父级呈现时,该地址才能正常工作。 如果先渲染父级,则我通过路由调用子视图,那么渲染页面时它不会在开始时显示数据,仅当我再次更改父级中的值时才会显示。 子视图正在订阅该服务,但呈现时未获取数据。 如果您需要父母或视图提供更多解释或代码,请告诉我。 希望有人可以帮助我。
更新
这是更新,因此您可以了解我的问题,这是我从Google Maps 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);
}
}
但是我在渲染此视图时并没有获得地理定位,如果我更改了父级文本框中的值,那么它会在视图中更新
如果您想收听最后一个广播,即使您尚未订阅,也需要使用BehaviorSubject
而不是Subject
。 在这种情况下,即使您在广播之后订阅,也将获得最新的更新。 这是您当前的情况该代码来自Github中的 RxJS
存储库
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
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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.