Question

我实际上遇到了区域问题。我有一个组件，在一个名为App的ngmodule中，调用另一个名为＆＃34; tache-list＆＃34;的组件，来自另一个名为＆＃34; Dossier＆＃34; （App进口档案）。我发送一个带有TacheService的http请求，返回我的taches（任务），我想用我的TacheListComponent打印它们。但是，加载页面时，没有更改检测。我做了很多研究，并找到了一些关于区域和角度区域的文档。我尝试使用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文件。太笨了......谢谢你的答案。

组件/服务，更改检测和区域

1 个答案: