组件/服务、变更检测和区域

Question

我实际上遇到了区域问题。我有一个组件，在一个名为 App 的 ngmodule 中，从另一个名为“Dossier”（App 导入 Dossier）的 ngmodule 调用另一个名为“tache-list”的组件。 我发送一个带有 TacheService 的 http 请求，返回我的 taches（任务），我想用我的 TacheListComponent 打印它们。但是，当页面加载时，没有变化检测。我做了很多研究，发现了一些关于 zone 和 Angular Zone 的文档。我尝试使用 NgZone.run()，这次检测到了 taches 的变化。 这怎么可能？有没有比在我的所有服务功能中粘贴运行功能更好的方法？谢谢您的回复，关于角度区域的信息似乎很少......

tache-list.component.ts ：

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

Answer 1

发现问题，我加载 zone.js 文件的顺序不正确。太蠢了……谢谢你的回答。