變化檢測未布頁面上工作時在angular2

Question

我試圖讓谷歌地圖從父組件值，爲我創造了一個sharedservice路線組件如下

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

從父我調幅廣播

第一渲染這個地址值改變並且通過訂閱它而在孩子中接收它，並且只有當父頁面呈現子頁面時，它的全部工作才能工作。 如果父母先呈現，然後我通過路由調用子視圖，然後它不顯示數據在頁面呈現時開始它只顯示如果我更改父值中的值再次更改。子視圖正在訂閱服務，但它在呈現時沒有獲取數據。 如果您需要更多解釋或代碼從父母或視圖讓我知道。希望有人能幫助我。

UPDATE

這是更新，所以你能理解我的問題 它在那裏我是從谷歌地圖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); 

    } 

} 

但是當這個視圖是rende時我沒有獲取地理位置紅色，並且如果我在父母的文本框更改值，則其觀點

Answer 1

如果你要聽最後廣播得到更新，即使你沒有認購尚未，那麼你需要使用BehaviorSubject，而不是Subject。在這種情況下，即使您在廣播後訂閱，您也將獲得最新的更新。 這是你目前的情況 此代碼是從RxJS庫中Github

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 

Answer 2

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