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>