Angular2 Доступ к компонентам компонента в наблюдаемом делегате?

Question

Я подписываюсь на объект наблюдения rxjs ObservableSubject и пытаюсь перезагрузить iframe при срабатывании события. Мой наблюдаемый делегат стреляет, но я не могу понять, как получить доступ к атрибутам моего компонента, они все не определены. вот некоторые фрагменты:

@Component({ 
    selector: 'tile-comp', 
    templateUrl: './app/tiles/feature.html' 
}) 

export class FeatureComponent implements OnInit, OnDestroy { 
    dtUrl: SafeResourceUrl; 

ngOnInit() { 
    console.log('in ngOnInt'); 

    this._patientService.patientSubject.subscribe(
     currentPatientObs => { console.log('dt url ' + this.dtUrl); }); 

    } 
} 

Я получаю это на консоль: "дт URL не определено. DtUrl привязан к src iframe, поэтому я надеялся обновить значение в этом наблюдаемом делетете.

Спасибо!

EDIT 1

---

Вот полный исходный код компонента:

import { Component, HostListener, HostBinding, OnInit, OnDestroy, NgZone } from '@angular/core'; 
import {SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser'; 
import {Router, ActivatedRoute, RoutesRecognized, ActivatedRouteSnapshot } from '@angular/router'; 
import { NavService } from '../layout/nav/nav.service'; 
import { NavigationItem} from '../model/NavigationItem'; 
import { SubNavigationItem, CTAButtonTarget} from '../model/SubNavigationItem'; 
import {OrderBy} from '../shared/orderBy'; 
import {PatientService} from '../patient/patient.service'; 


@Component({ 
    selector: 'tile-comp', 
    templateUrl: './app/tiles/feature.html', 
    pipes: [OrderBy], 
    providers: [NavService] 
}) 

export class FeatureComponent implements OnInit, OnDestroy { 

    selectedFeature: NavigationItem; 
    selectedSubFeature: SubNavigationItem; 

    featureQryParam: string; 
    subfeatureQryParam: string; 

    dtUrl: SafeResourceUrl; 

    private routeParamObs: any; 
    ctaButtons: SubNavigationItem[]; 

    constructor(private _navService: NavService, private _route: ActivatedRoute, private _router: Router, private _sanitizer: DomSanitizationService, private _patientService: PatientService) { } 

    ngOnInit() { 
     this.routeParamObs = this._route.params.subscribe(qp => { 
      this.handleParamChange(qp); 
     }); 

     this._patientService.patientSubject.subscribe(
      currentPatientObs => { console.log('dt url ' + this.dtUrl); }); 
    } 

    getSelectedFeature() { 

     this._navService.getSubNavItem(this.featureQryParam).subscribe(item => { 
      this.selectedFeature = item; 

      if (this.selectedFeature && this.selectedFeature.SubNavigation) { 
       this.selectedFeature.SubNavigation.forEach(s => s.Href ? s.SanitizedUrl = this._sanitizer.bypassSecurityTrustResourceUrl(s.Href) : s.Href); 

       if (this.subfeatureQryParam && this.subfeatureQryParam !== '') { 
        this.selectedSubFeature = this.selectedFeature.SubNavigation.find(sn => sn.SubFeature.toLocaleLowerCase() === this.subfeatureQryParam); 
       } else { 
        this.selectedSubFeature = this.selectedFeature.SubNavigation.find(sn => sn.Order === 1); 
       } 

       this.getCTAButtons(); 

       this.dtUrl = this.selectedSubFeature.SanitizedUrl; 
      } 
     }); 
    } 

    handleParamChange(params: any) { 
     this.featureQryParam = params['feature']; 
     this.subfeatureQryParam = (params['subFeature'] && params['subFeature'] !== '') ? params['subFeature'].toLocaleLowerCase() : ''; 
     this.getSelectedFeature(); 
    } 

    ngOnDestroy() { 
     this.routeParamObs.unsubscribe(); 
    } 

    CTAButtonClick(ctaBtn: SubNavigationItem) { 
     let ngRoute = []; 
     ngRoute.push(ctaBtn.CTAButtonTarget.AngularRouteName); 
     ctaBtn.CTAButtonTarget.AngularRouteParams.forEach(rParam => ngRoute.push(rParam)); 
     this._router.navigate(ngRoute); 
    } 

    //iterate over the subfeatures and grab all the cta buttons and load them into the ctaButtonTargets collection 
    getCTAButtons() { 
     this.ctaButtons = []; 
     this.ctaButtons = this.selectedFeature.SubNavigation.filter(sn => sn.IsCTAButton === true); 
     console.log('number of cta buttons: ' + this.ctaButtons.length); 
     this.ctaButtons.forEach(btn => btn.CTAButtonTarget.Href ? btn.CTAButtonTarget.SanitizedHref = this._sanitizer.bypassSecurityTrustUrl(btn.CTAButtonTarget.Href) : btn.CTAButtonTarget.Href); 
    } 
} 

Answer 1

Я столкнулся с проблемами в прошлом, где переменные отказавшихся существовать на компоненте при доступе анонимные функции. До сих пор я работал над тем, чтобы создать метод, который специально устанавливает данные и вызывает это из подписки. Такие как:

ngOnInit() { 
    this.routeParamObs = this._route.params.subscribe(qp => { 
     this.handleParamChange(qp); 
    }); 

    this._patientService.patientSubject.subscribe(
     currentPatientObs => { this.performOperation(); }); 
} 

performOperation(): void { 
    console.log('dt url ' + this.dtUrl); 
} 

Не совсем уверен, почему это происходит иногда, но, надеюсь, это помогает.

Answer 2

Похоже, что проблема связана с тем, как мы определяем нашу подписку. Когда я добавил наблюдаемую ссылку на компонент, я начал получать доступ к переменным элемента Components из наблюдаемого делегата. Вот что я сделал:

export class FeatureComponent implements OnInit, OnDestroy { 

    selectedFeature: NavigationItem; 
    selectedSubFeature: SubNavigationItem; 

    featureQryParam: string; 
    subfeatureQryParam: string; 

    dtUrl: SafeResourceUrl; 

    private routeParamObs: any; 
    private patientObs: any; 
    ctaButtons: SubNavigationItem[]; 

    constructor(private _navService: NavService, private _route: ActivatedRoute, private _router: Router, private _sanitizer: DomSanitizationService, private _patientService: PatientService) { } 

    ngOnInit() { 
     this.routeParamObs = this._route.params.subscribe(qp => { 
      this.handleParamChange(qp); 
     }); 

     this.patientObs = this._patientService.patientSubject.subscribe(
      currentPatient => { 

       console.log('dt url ' + this.dtUrl); 
       this.refreshIframe(currentPatient); 
      }); 
    } 

    refreshIframe(pat:any) { 
     console.log('dt url in method ' + this.dtUrl); 
     console.log('pat: '+pat); 
    }