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委托中的值。

谢谢！

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

Obularable Delegate中的Angular2访问组件成员？

2 个答案: