NativeScript:如何从主页显示侧抽屉? [英] NativeScript: how to show the side drawer from the home page?

问题描述

我正在使用 Angular 8 和 NativeScript 6.4.1 编写应用.

I'm writing an app with Angular 8 and NativeScript 6.4.1.

我想实现一个侧抽屉，它只会在主页上按下汉堡按钮时显示.我不希望它在其他时间显示.

I want to implement a Side Drawer that will only show when the hamburger button is pushed on the home page. I don't want it to show any other time.

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

我试图实现这个侧抽屉，但它一直给我这个错误:

I tried to implement this side drawer and it keep giving me this error:

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

这是我的游乐场:https://play.nativescript.org/?template=play-ng&id=u​​jiNiC&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();
    }
}

推荐答案

简而言之:

您没有以正确的方式设置 RadSideDrawer.您需要在根视图设置抽屉，并使用 tkDrawerContent 选择器标记抽屉内容，使用 tkMainContent 选择器标记 angular router.

You're not setting RadSideDrawer in the right way. You need to set the drawer at the root view, and mark drawer content with the tkDrawerContent selector, and the angular router with the tkMainContent selector.

详细来说，您需要:

首先，将RadSideDrawer设置在你的应用最顶层的组件，即app.component.html上，这样就出现了侧边抽屉的内容，用tkDrawerContent 选择器，以及用 tkMainContent 选择器标记的其余内容(您的应用程序的内容).如果您使用的是 Angular 路由器，则将其添加到 ，如下所示:

Firstly, set RadSideDrawer at the topmost component of your app, i.e. on the app.component.html, so that there is the side drawer content, marked with the tkDrawerContent selector, and the rest of the content (the content of your app), marked with the tkMainContent selector. If you're using Angular router then add it to <page-router-outlet></page-router-outlet>, as appears below:

app.component.html:

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

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

您可以渲染您拥有的任何自定义组件/在上面标记为 GridLayout 的 tkDrawerContent 内.

You can render any custom component that you have instead/inside the tkDrawerContent marked GridLayout above.

其次，确保将 NativeScriptUISideDrawerModule 导入到加载包含 的组件的模块中.在我的示例中，它是 app.module.

Secondly, make sure to import NativeScriptUISideDrawerModule into the module that loads the component that has <RadSideDrawer> inside it. In my example, it is the 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 访问它.在您的组件中添加以下内容:

Thirdly, to open/close the side drawer, you need to access it through the app RootView. Inside your component add these:

home.componenet.ts:

导入:

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

在你的课堂上:

public openSideDrawer() {
    const sideDrawer = <RadSideDrawer>app.getRootView();
    sideDrawer.showDrawer();
}

如果您的应用因多个页面和路由而变得非常复杂，那么您可以在根注入的 ui 服务或共享的自定义 actionBar 组件中添加用于打开/关闭抽屉的代码.

If your app becomes very complex with multiple pages and routes, then you can add the code to open/close the drawer in a ui service injected at root, or in a shared custom actionBar component.

对您的示例的修复是 playground.

A fix to your example is playground.

快乐的原生脚本！

这篇关于NativeScript:如何从主页显示侧抽屉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！