nativescript角度sidedrawer不出现没有错误

Question

我想在angulars与nativescript开发应用程序。
我想使用telerik-ui的侧面抽屉，就像过滤面板一样，我将在主要内容文本区域中显示一些数据。问题是我启动代码时没有错误，除了事实上没有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

我设法通过在我的package.json文件中添加一些依赖来解决我的问题。
要做到这一点，我创建了一个新的空白生成的项目，并安装了RadSideDrawer，我比较了我的依赖关系并进行了升级并添加了一些（我的依赖列表中没有@ angular /动画）

Answer 2

你有任何豁免吗？ 你确定你的Button选项卡有效吗？ 否则我得到这个在我的项目上工作： 我给RadSideDrawer的ID

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

和使用这样的@ViewChild：

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

让我知道，如果你有一个解决方案，这。