创建具有多个侧边抽屉的应用

在看到一些人提到他们在应用中需要在单个页面上拥有多个侧边抽屉的功能，或者利用侧边抽屉进行子路由时，我决定使用自定义组件来试验解决这个问题的方法。让我们开始吧！

注意：本教程需要一些关于 Angular 中自定义组件如何工作的知识。

如果您按照下面的代码为左右菜单创建两个新组件，我们将使用它们来保持侧边抽屉 HTML 页面更简洁。

步骤 1：创建组件


import { Component } from "@angular/core";
@Component({
    selector: "left-drawer",
    moduleId: module.id,
    template: `<StackLayout style="background-color: blue">
    <Label text="Left drawer"></Label>
    <Label text="Left Item 1"></Label>
    <Label text="Left Item 2"></Label>
</StackLayout>`
})
export class LeftDrawerComponent { }

这样做可以更容易地修改任一菜单，并且不会使主页面 HTML 混乱或过于冗长。

步骤 2：创建侧边抽屉的布局

修改您布局侧边抽屉的 HTML


<RadSideDrawer [drawerLocation]="drawerLocation" gesturesEnabled="false" tkExampleTitle tkToggleNavButton>
    <StackLayout tkDrawerContent>
        <left-drawer *ngIf="drawerLocation == 'Left'"></left-drawer>
        <right-drawer *ngIf="drawerLocation == 'Right'"></right-drawer>
        <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="closeDrawer()"></Label>
    </StackLayout>
    <StackLayout tkMainContent>
        <Button text="Left" (tap)="openDrawer('Left')"></Button>
        <Button text="Right" (tap)="openDrawer('Right')"></Button>
        <!—Your code here -->
    </StackLayout>
</RadSideDrawer>

注意：<StackLayout tkMainContent> 中的 2 个按钮仅用于演示目的，可以删除。

步骤 3：构建侧边抽屉组件

然后，在包含侧边抽屉的组件的 TypeScript 文件中，您需要添加几行额外的代码以确保菜单正确交换。首先在文件顶部添加以下导入。


import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { RadSideDrawerComponent } from "nativescript-pro-ui/sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-pro-ui/sidedrawer';

然后将以下变量添加到您的类中


@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: RadSideDrawer;
drawerLocation: string = "Left";

为方便起见，添加此代码段以加快编写任何侧边抽屉代码的速度。


ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
}

步骤 4：构建抽屉的功能

最后，添加两个基本函数将处理使用哪个菜单、它将在屏幕上的哪个位置以及关闭侧边抽屉。


openDrawer(position) {
    this.drawerLocation = position;
    setTimeout(() => this.drawer.showDrawer(), 5);
}
closeDrawer() {
    this.drawer.closeDrawer();
}

注意：此代码：setTimeout(() => this.drawer.showDrawer(), 5); 可以阻止抽屉出现卡顿或闪烁。有时会出现这种情况，因为将抽屉放置到其所属位置需要几毫秒。drawerLocation 在打开抽屉之前更改，因此 5 毫秒的延迟对用户来说是不可察觉的，但足以使抽屉正常工作。

我还尝试使用路由作为另一种可能的解决方案，但路由似乎更改了整个页面，而不仅仅是侧边抽屉菜单。我无法找到使其工作的方法。

也可以使用滑动手势打开侧边抽屉，只需进行少量修改。添加


 (swipe)="onSwipe($event)"

到


<StackLayout tkMainContent>

获取


<StackLayout (swipe)="onSwipe($event)" tkMainContent>

然后您需要将


import { SwipeGestureEventData } from "tns-core-modules/ui/gestures";

添加到您的导入中，并在类中添加一个简单的函数。


onSwipe(args: SwipeGestureEventData) {
    if (args.direction == 1) {
        this.openDrawer("Left");
    } else if (args.direction == 2) {
        this.openDrawer("Right");
    }
}

这就是您在每个页面上创建具有多个侧边抽屉的应用所需的所有操作。解决方案的简单性让我感到惊讶，因为我预计必须使用更“hacky”的解决方案来解决问题，而不是更“basic”的解决方案。您可以在此处找到本演示中使用的代码的仓库此处。