Observable DelegateのAngular2 Accessコンポーネントメンバーですか？

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

    } 
} 

「dt url undefined」と表示されています。 dtUrlはiframeのsrcにバインドされているので、このobservableデリゲートの値を更新したいと考えていました。

ありがとうございます！

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

私は変数を介してアクセスした場合のコンポーネントに存在することを拒否し、過去の問題に遭遇しました：ここでEDIT 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

サブスクリプションをどのように定義しているかは問題です。コンポーネントに観測可能な参照を追加すると、ObservableデリゲートからComponentsメンバ変数にアクセスできるようになりました。ここで私は何をしたのですか：