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 选择器标记 angular 路由器。

详细的，您需要：

首先，将 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>

您可以呈现您拥有 instead/inside 上面标记为 GridLayout 的 tkDrawerContent 的任何自定义组件。

其次，确保将 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
    ]
})

第三，open/close侧边抽屉，需要通过应用RootView访问。在你的组件中添加这些：

home.componenet.ts:

导入：

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

在你的 class 里面：

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

如果您的应用变得非常复杂，包含多个页面和路由，那么您可以将代码添加到 open/close 抽屉中 ui 在根目录注入的服务，或共享的自定义 actionBar 组件.

您的示例的修复方法是 playground。

祝原生脚本编写愉快！

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

NativeScript: how to show the side drawer from the home page?

navigation

navigation-drawer

nativescript

angular