私は実際にゾーンに問題があります。私はアプリケーションと呼ばれるngmodule内に、 "Dossier"(App Imports Dossier)という別のngmoduleから "tache-list"という別のコンポーネントを呼び出しています。 タッシュ(タスク)を返すTacheServiceでhttpリクエストを送信し、TacheListComponentでそれらをプリントしたいと思います。ただし、ページが読み込まれると、変更の検出はありません。私は多くの研究を行い、ゾーンと角度ゾーンに関するいくつかの文書を見つけました。 NgZone.run()を使用しようとしましたが、今回はtachesの変更が検出されました。 これはどのように可能ですか?すべてのサービス機能にrun関数を貼り付けるよりも良い方法はありますか?コンポーネント/サービス、変更の検出とゾーン
import { Component, OnInit } from '@angular/core';
import { TacheService } from '../services/tache.service';
import { Tache } from '../entities/tache.ts';
import { ChangeDetectorRef } from "@angular/core";
import 'rxjs/Observable';
import 'rxjs/add/operator/toPromise'
@Component({
selector: 'tache-list',
templateUrl: 'build/dossier/partials/tache-list.component.html',
styleUrls: ['build/dossier/css/tache-list.component.css']
})
export class TacheListComponent implements OnInit {
title: String = 'Liste des tâches';
taches: Object[];
errorMessage: any;
subscriptions: any[] = [];
constructor(private tacheService: TacheService, private changeDetector: ChangeDetectorRef) { }
ngOnInit() {
this.getTachesDuJour();
}
ngOnDestroy() {
this.subscriptions.forEach(sub => {
sub.unsubscribe();
});
}
getTachesDuJour() {
return this.tacheService.getTachesDuJour().subscribe(
taches => {
this.taches = taches;
//this.changeDetector.detectChanges();
},
error => {
this.errorMessage = <any>error;
}
);
}
}
tache.service.ts:
import { Injectable, OnInit, NgZone } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class TacheService implements OnInit {
url: string = 'http://web-pierre/ebexapplication/public/api/tache';
constructor(private http: Http, private zone: NgZone) { }
ngOnInit() {
}
private extractData(res: Response) {
let body = res.json();
return body || {};
}
private handleError(error: any) {
let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg);
return Observable.throw(errMsg);
}
getTachesDuJour(): Observable<Object[]> {
this.zone.run(() => {});
var response = this.http.get(this.url).map(res => this.extractData(res)).catch(this.handleError);
return response;
}
}
あなたのサービス機能でそれを望まないなら、サブスクライブの次のハンドラでそれを行うことができます。ウェブ、デスクトップ、モバイルでこれをやっていますか? – scottmgerstl
ウェブで。サブスクライブの次のハンドラはどういう意味ですか?私のコンポーネントですか? – Pythorogus
はい、コンポーネントにあります。 taches => this.zone.run(()=> this.taches = taches); オブザーバブルには、onNext、onError、onCompleteの順にサブスクリプションに提供できる3つの機能があります。以下はレビューするリソースです:https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md – scottmgerstl