2016-08-25 4 views
0

私は実際にゾーンに問題があります。私はアプリケーションと呼ばれる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; 
    } 
} 
+0

あなたのサービス機能でそれを望まないなら、サブスクライブの次のハンドラでそれを行うことができます。ウェブ、デスクトップ、モバイルでこれをやっていますか? – scottmgerstl

+0

ウェブで。サブスクライブの次のハンドラはどういう意味ですか?私のコンポーネントですか? – Pythorogus

+0

はい、コンポーネントにあります。 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

答えて

1

お応えするために...角度ゾーンに関する情報は稀であると思われ、

tache-list.component.tsをありがとう問題が見つかりました、私は悪い順序でzone.jsファイルをロードしていました。あなたの答えをありがとう。

関連する問題