nativescript - Nativescript RadSideDrawer 冻结

Question

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

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

RadSideDrawer 过渡不平滑。但是当我安装有角度的nativescript ui 示例时，有角度的应用程序抽屉过渡非常平滑：

Answer 1

I think that the best approach is to delay access to data inside a rendered component so navigation (and animation) from RadSideDrawer can complete. Then when data is accessible, rendering of a component starts.

If you mix RxJS delay operator (assuming you get data using Observable) with ActivityIndicator - you can get quite good results.

Below is one of many possible solutions.

TS file:

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 file:

<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>