0

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 にバインドされているため、この監視可能なデリゲートの値を更新したいと考えていました。

ありがとう！

編集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);
    }
}
4

2 に答える 2

0

過去に、無名関数を介してアクセスしたときに変数がコンポーネントに存在することを拒否するという問題に遭遇しました。これまでに対処してきた方法は、具体的にデータを設定するメソッドを作成し、それをサブスクライブから呼び出すことです。そのような：

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

なぜこれが時々起こるのか完全にはわかりませんが、これが役立つことを願っています.

于 2016-08-18T16:55:49.723 に答える