NativeScript：如何从主页显示侧面抽屉？

Question

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

我想实现一个仅在按下主页上的汉堡包按钮时才会显示的侧面抽屉。我不希望它再显示任何时间。

我已阅读此文档：https://docs.nativescript.org/angular/ui/ng-components/ng-SideDrawer/getting-started#initialization

我尝试实现此侧边抽屉，但它一直给我这个错误：

"TypeError: Cannot read property 'showDrawer' of undefined"

这是我的游乐场：https://play.nativescript.org/?template=play-ng&id=ujiNiC&v=2

代码段：

export class HomeComponent implements OnInit {

    @ViewChild(SideDrawerComponent, { static: false }) public drawerComponent: SideDrawerComponent;
    private drawer: RadSideDrawer;

    constructor() {
    }

    ngOnInit(): void {
    }

    public openSideDrawer() {
        this.drawer.showDrawer();
    }
}

Answer 1

简而言之：

您未正确设置RadSideDrawer。您需要在根视图中设置抽屉，并使用tkDrawerContent选择器标记抽屉内容，并使用tkMainContent选择器标记角形铣刨机。

详细，您需要：

首先，将RadSideDrawer设置在应用程序的最高组件上，即app.component.html上，以便有用tkDrawerContent选择器标记的侧边抽屉内容，以及其余内容（应用的内容），并用tkMainContent选择器标记。如果您使用的是Angular路由器，则将其添加到<page-router-outlet></page-router-outlet>，如下所示：

app.component.html：

<RadSideDrawer>
    <GridLayout tkDrawerContent rows="auto, *">
        <!-- content of the drawer -->
    </GridLayout>

    <page-router-outlet tkMainContent></page-router-outlet>
</RadSideDrawer>

您可以呈现在<< tkDrawerContent上面标记为GridLayout的任何自定义组件。

第二，请确保将NativeScriptUISideDrawerModule导入模块，该模块将加载内部包含<RadSideDrawer>的组件。在我的示例中，它是

app.module。

app.module.ts：

import { NativeScriptUISideDrawerModule } from 'nativescript-ui-sidedrawer/angular';


@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUISideDrawerModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

第三，要打开/关闭侧抽屉，您需要通过应用RootView对其进行访问。在您的组件内部添加以下内容：
home.componenet.ts：

导入：

import { RadSideDrawer } from 'nativescript-ui-sidedrawer';

在您的班级内：
public openSideDrawer() {
    const sideDrawer = <RadSideDrawer>app.getRootView();
    sideDrawer.showDrawer();
}

如果您的应用变得非常复杂，具有多个页面和路由，那么您可以添加代码以在根目录下注入的ui服务或共享的自定义actionBar组件中打开/关闭抽屉。
您的示例的修正为playground。
快乐的本机脚本！