时间戳

首页 > 解决方案 > NativeScript - 如何延迟路由直到侧抽屉关闭？

angular - NativeScript - 如何延迟路由直到侧抽屉关闭？

问题描述

我正在使用 NativeScript 6.4.1 和 Angular 8 编写应用程序。

我在我的项目中包含了 SideDrawer 功能。

https://docs.nativescript.org/ui/components/SideDrawer/getting-started 到目前为止它运行良好。

我注意到的一件事是，当我注销应用程序时，我通过 SideDrawer 注销，然后路由到应用程序的第一页。这种从侧边抽屉到主页的过渡不是很顺利。

我怎样才能等到侧抽屉关闭后再进行布线或使过渡更顺畅？

示例代码：

export class LogoutService {

    constructor(private routerExtensions: RouterExtensions, private sideDrawerService: SideDrawerService) {}

    public logout(): void {
        appSettings.clear();
        this.sideDrawerService.closeDrawer();
        this.routerExtensions.navigate(['landing-page'], { clearHistory: true });
    }

}

export class SideDrawerService {

    constructor() {}

    public showSideDrawer() {
        const sideDrawer = app.getRootView() as RadSideDrawer;
        sideDrawer.showDrawer();
    }

    public closeDrawer() {
        const sideDrawer = app.getRootView() as RadSideDrawer;
        sideDrawer.closeDrawer();
    }

}

编辑：我可以在这里的文档中看到，当https://docs.nativescript.org/ns-ui-api-reference/classes/radsidedrawer#drawerclosedevent触发一些事件

我如何收听这些事件？

我尝试了这样的事情，但它不起作用：

public closeDrawerAsync() {

    const sideDrawer = app.getRootView() as RadSideDrawer;

    sideDrawer.drawerClosedEvent //this does not seem to exist

}

标签： angularnativescript

解决方案

使用drawerClosed事件

export class SideDrawerService {
    ...
    closeDrawer (callback?: () => void) {
       const sideDrawer = app.getRootView() as RadSideDrawer;
       if (callback) {
         callback = zonedCallback(callback);
         sideDrawer.once(RadSideDrawer.drawerClosedEvent, () => {
             callback();
         });
       }
       sideDrawer.closeDrawer();
    }
    ...
}

现在你可以像这样使用它，

public logout(): void {
    appSettings.clear();
    this.sideDrawerService.closeDrawer(()=> {
       this.routerExtensions.navigate(['landing-page'], { clearHistory: true });
    });
}

推荐阅读