我正在开发一个NativeScript / Angular应用程序，允许用户浏览文件夹层次结构。由于NativeScript使用本机视图的方式，我创建了奇数文件夹和偶数文件夹组件，这些组件在用户在层次结构中移动时交替显示。两个组件共享相同的模板。该模板有一个指向Observable数组的* ngFor异步管道。在每个组件的ngOnInit中，我进行了一个服务调用，返回当前可见文件夹的文件夹内容的可观察数组。
总的来说，这种方法效果很好，可以满足我的需求。
但是，在添加功能的过程中，我将我的数据服务更改为具有单个BehaviorSubject，每个服务调用将内容数组推送到其上，以便在后台进程修改文件夹内容时可以更新视图。
在我进行此转换后，我注意到我的应用程序的性能变得非常糟糕，屏幕之间有几秒钟的延迟。当我浏览时似乎变慢了，但很难量化
我不确定我做错了什么。
对代码进行充分的讨论。 （这些是仅显示相关代码的例外情况）
服务代码
private _matrixItemList: BehaviorSubject<MatrixItem[]> = new BehaviorSubject([]);
get matrixItems() {
return this._matrixItemList.asObservable();
}
public listFolderContents(folder: Folder) {
return this.matrixItemRepository.getFolderContents(folder)
.then(folderContents => {
this._matrixItemList.next(folderContents);
});
}
public listFolderContentsAsObservable(folder: Folder): Observable<MatrixItem[]> {
return Observable.fromPromise(this.matrixItemRepository.getFolderContents(folder));
}
文件夹组件模板
<StackLayout>
<StackLayout class="matrix-item" *ngFor="let matrixItem of matrixItems | async" (tap)="viewMatrixItem($event, matrixItem)">
<ng-container *ngIf="matrixItem.type === 'folder'; then folderBlock else photoBlock"></ng-container>
<ng-template #folderBlock>
<matrix-folder [folder]="matrixItem"></matrix-folder>
</ng-template>
<ng-template #photoBlock>
<matrix-photo [photo]="matrixItem"></matrix-photo>
</ng-template>
</StackLayout>
</StackLayout>
使用BehaviorSubject [SLOW]
的文件夹组件 ngOnInit() {
this.matrixItems = this.matrixItemService.matrixItems;
this.matrixItemCountSubscription = this.matrixItems
.subscribe(
matrixItems => {
this.matrixItemCount = matrixItems.length;
},
(error) => {
console.log("FolderOddComponent - ERROR getting matrixItems");
console.dir(error);
});
this.matrixItemService.listFolderContents(folder);
});
}
private onPageUnloaded(eventData) {
if (this.matrixItemCountSubscription != null) {
this.matrixItemCountSubscription.unsubscribe();
}
}
使用Observable [FAST]的文件夹组件
ngOnInit() {
this.matrixItems = this.matrixItemService.listFolderContentsAsObservable(folder);
this.matrixItemCountSubscription = this.matrixItems
.subscribe(
matrixItems => {
this.matrixItemCount = matrixItems.length;
},
(error) => {
console.log("FolderOddComponent - ERROR getting matrixItems");
console.dir(error);
});
});
}
private onPageUnloaded(eventData) {
if (this.matrixItemCountSubscription != null) {
this.matrixItemCountSubscription.unsubscribe();
}
}