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

【问题标题】：NativeScript: how to show the side drawer from the home page?NativeScript：如何从主页显示侧抽屉？
【发布时间】：2020-04-09 16:06:36
【问题描述】：

我正在使用 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

代码sn-p：

export class HomeComponent implements OnInit {

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

    constructor() {
    }

    ngOnInit(): void {
    }

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

【问题讨论】：

您不能访问不在其自身模板中的组件。使用 rxjs 布尔主题创建服务，订阅侧抽屉组件中的主题，在值更改时打开/关闭抽屉。在 home 组件中使用相同的主题来触发更改。

标签： angular navigation nativescript navigation-drawer

【解决方案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>

您可以在上面标记为 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
    ]
})

第三，要打开/关闭侧抽屉，您需要通过应用程序RootView访问它。在你的组件内添加这些：

home.componenet.ts：

进口：

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

在你的班级里：

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

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

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

快乐的原生脚本！

【讨论】：