Question

我有一个RC6应用程序，由15个模块组成，每个模块可能有5-7个组件。

每个组件都是一个列表，例如用户。它还在侧边栏中包含一个搜索表单，我可以在其中发回API以获取更新列表。

它有效，但性能不佳。如果我有100-200行，一切都运行顺利，但在上面，浏览器开始分配越来越多的内存，整个应用程序“滞后”。

我是Angular的新手，我可能犯了一个非常基本的错误。这是我在不同组件中如何做事的快速浏览：

我在构造函数上面定义了一个新的observable：

somethingList: Observable<any>;

我在构造函数上面定义了一个订阅：

somethingListSubscription: Subscription;

我使用生命周期钩子通过服务层填充observable：

ngOnInit() : void {

    this._feedbackService.startLoading();

    this.somethingListSubscription = this._someService.getSomething()
        .subscribe(
            something => this.somethingList = something,
            error => this._feedbackService.displayError(<any>error),
            () => this._feedbackService.stopLoading()
        );

}

这就是服务方法的样子：

getSomething() : Observable<any> {

    var params = "&param=";

    return this._http
            .post(apiUrl + 'Some/Action', params, {withCredentials: true, headers: this.headers})
            .timeoutWith(8000, Observable.defer(() => Observable.throw(this._feedbackService.timeout())))
            .map((response: Response) => response.json().data);

}

然后，当用户提交搜索表单时，我这样做：

onSearchFormSubmit() {

    this._feedbackService.startLoading();

    var searchFor =  {
        name: this.searchForm.value.name,
        type: this.searchForm.value.type,
        count: this.searchForm.value.count
    };

    this.somethingListSubscription = this._someService.standardSearch(searchFor)
        .subscribe(
            something => this.somethingList = something,
            error => this._feedbackService.displayError(<any>error),
            () => this._feedbackService.stopLoading()
        );

}

然后我使用另一个生命周期钩子取消订阅：

ngOnDestroy() : void {

    if(this.somethingListSubscription != undefined) {
        this.somethingListSubscription.unsubscribe();
    }

}

最后，在HTML中，我使用ngFor，如下所示：

<tr *ngFor="let thing of somethingList; let i = index; let l = last">
    <td>{{thing.value1}}</td>
    <td>{{thing.value2}}</td>
    <td>{{thing.value3}} {{l ? incrementCount(i) : ''}}</td>
</tr>

在浏览器分析器中运行应用程序时，我可以看到内存一直在增加。

我可能犯了一个非常基本的错误？

Angular 2：性能问题

0 个答案: