nativescript angular sidedrawer 没有出现没有错误

Question

我正在尝试使用 angular.
在 nativescript 中开发应用程序我想使用 telerik-ui 的侧边抽屉作为一些数据的过滤面板，我将在主要内容文本中显示 area.The 问题是我在启动代码时没有错误，除了事实根本没有sideDrawer。我不知道如何调试它。
我目前正在尝试使用这个示例，对我的应用程序进行一些修改（仅文件名）：
http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started

filter.component.html:

<RadSideDrawer showOverNavigation="true" tkExampleTitle tkToggleNavButton class="page">
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
            <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Social" class="sideLabel"></Label>
            <Label text="Promotions" class="sideLabel"></Label>
            <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Important" class="sideLabel"></Label>
            <Label text="Starred" class="sideLabel"></Label>
            <Label text="Sent Mail" class="sideLabel"></Label>
            <Label text="Drafts" class="sideLabel"></Label>
        </StackLayout>
        <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
    </StackLayout>
    <StackLayout tkMainContent>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
        <Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>
    </StackLayout>
</RadSideDrawer>

filter.component.ts:

import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from "@angular/core";
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import { Observable } from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-telerik-ui/sidedrawer';

@Component({
    moduleId: module.id,
    selector: "tk-sidedrawer-getting-started",
    templateUrl: 'filter.component.html',
    styleUrls: ['filter.component.css']
})
export class SideDrawerGettingStartedComponent implements AfterViewInit, OnInit {
    private _mainContentText: string;

    constructor(private _changeDetectionRef: ChangeDetectorRef) {
    }

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;

    private drawer: RadSideDrawer;

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

    ngOnInit() {
        this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.";
    }

    get mainContentText() {
        return this._mainContentText;
    }

    set mainContentText(value: string) {
        this._mainContentText = value;
    }

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

    public onCloseDrawerTap() {
       this.drawer.closeDrawer();
    }
}

filter.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui/sidedrawer/angular";


import { FilterRoutingModule } from "./filter.routing";
import { SideDrawerGettingStartedComponent } from "./filter.component";

@NgModule({
    imports: [
        NativeScriptModule,
        FilterRoutingModule,
        NativeScriptUISideDrawerModule
    ],
    declarations: [
        SideDrawerGettingStartedComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class FilterModule { }

filter.routing.ts:

    import { NgModule } from "@angular/core";
    import { Routes } from "@angular/router";
    import { NativeScriptRouterModule } from "nativescript-angular/router";

    import { SideDrawerGettingStartedComponent } from "./filter.component";

    const routes: Routes = [
        { path: "filter", component: SideDrawerGettingStartedComponent }
    ];

    @NgModule({
        imports: [NativeScriptRouterModule.forChild(routes)],
        exports: [NativeScriptRouterModule]
    })
    export class FilterRoutingModule { }

filter.component.css:

 button {
    font-size: 15;
    horizontal-align: center;
}

.mainContentText {
    font-size: 13;
    padding: 10;
}

.mainContentButton {
    margin: 10;
    horizontal-align: left;
}

.drawerContentButton {
    color: yellowgreen;
}

.sideStackLayout {
    background-color: gray;
}

.sideTitleStackLayout {
    height: 56;
    text-align: center;
    vertical-align: center;
}

.sideLabel {
    padding: 10;
}

.sideLightGrayLabel {
    background-color: lightgray;
}

当我进入这个过滤页面时，侧边抽屉根本没有出现。我的应用程序的结构与此类似：https://github.com/NativeScript/sample-Groceries

如有任何帮助，我们将不胜感激。

Answer 1

你有任何例外情况吗？你确定你的按钮选项卡有效吗？否则，我将其用于我的项目：我给了 RadSideDrawer 一个 ID

<RadSideDrawer #drawer showOverNavigation="true" tkExampleTitle tkToggleNavButton class="page">

并像这样使用@ViewChild：

@ViewChild('drawer') public drawerComponent: RadSideDrawerComponent;

如果您对此有解决方案，请告诉我。

Answer 2

我通过在我的 package.json 文件中添加一些依赖项设法解决了我的问题。
为此，我创建了一个新的空白生成项目并安装了 RadSideDrawer，我比较了我拥有的依赖项并升级并添加了其中一些（例如，我的依赖项列表中没有 @angular/animations）

nativescript angular sidedrawer 没有出现没有错误

nativescript angular sidedrawer not appearing without errors

typescript

nativescript

nativescript-telerik-ui

angular