Nativescript RadSideDrawer冻结

Question

我的Nativescript应用程序的许多页面都有RadSideDrawer。主应用程序组件具有page-router-outlet，所有其他页面都通过导航加载到此组件中。带抽屉的页面包含围绕页面内容的RadSideDrawer组件。

问题是RadSideDrawer在页面之间导航时冻结。你可以在这里看到它：

RadSideDrawer转换不顺畅。但是当我安装角度nativescript ui samples angular application抽屉时，过渡非常平滑：

Answer 1

我认为最好的方法是延迟对渲染组件内部数据的访问，以便可以完成RadSideDrawer的导航（和动画）。然后，当可以访问数据时，开始呈现组件。

如果您将RxJS延迟运算符（假设您使用Observable获取数据）与ActivityIndi​​cator结合使用-可以获得很好的结果。

以下是许多可能的解决方案之一。

TS文件：

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { EventItem } from "../../../../models/event-item.model";
import { AppStateFacadeService } from "../../../../services/app-state-facade.service";
import { delay } from "rxjs/operators";

@Component({
    selector: "Test",
    moduleId: module.id,
    templateUrl: "./test.component.html",
    styleUrls: ["./test.component.css"]
})
export class TestComponent implements OnInit {
    events$: Observable<Array<EventItem>>;

    constructor(private appStateFacade: AppStateFacadeService) {}

    ngOnInit(): void {
        this.events$ = this.appStateFacade.getEvents().pipe(delay(400));
    }
}

HTML文件：

<StackLayout *ngIf="events$ | async as events; else nocontent">
    <ListView class="list-group" [items]="events">
        <ng-template let-event="item">
            <EventItem [eventItem]="event"></EventItem>
        </ng-template>
    </ListView>
</StackLayout>
<ng-template #nocontent>
    <ActivityIndicator row="1" #activityIndicator busy="true" width="100" height="100" class="activity-indicator">
    </ActivityIndicator>
</ng-template>