如何使用Telerik的UI插件在为NativeScript应用程序方面的抽屉

我使用Telerik的UI插件在我NativeScript应用程序实现抽屉functionality.I'm下面这个教程本 - https://www.nativescript.org/blog/details/using-cross-platform-native-sidedrawer-component-in-nativescript 如何使用Telerik的UI插件在为NativeScript应用程序方面的抽屉

这里是我的代码 -

import {Component} from "@angular/core"; 
import listViewModule = require("nativescript-telerik-ui/listview"); 
import drawerModule = require("nativescript-telerik-ui/sidedrawer"); 
@Component({ 
    selector: "my-app", 
    template: ` 
<drawer:SideDrawer id="drawer1"> 
    <drawer:SideDrawer.mainContent> 

     <!-- Place your page content here --> 
     <StackLayout> 
     <Label text="Tap the button" class="title"></Label> 
     <Button text="TAP" (tap)="onTap()"></Button> 
     <Label [text]="message" class="message" textWrap="true"></Label> 
     </StackLayout> 

     <StackLayout> 
     <Button tap="openDrawer" text="ToggleDrawer"/> 
     </StackLayout> 
    </drawer:SideDrawer.mainContent> 

    <drawer:SideDrawer.drawerContent> 
    <StackLayout cssClass="drawerContent"> 
     <StackLayout cssClass="headerContent"> 
     <Label text="Drawer Header"/> 
     </StackLayout> 

     <StackLayout cssClass="drawerMenuContent"> 
     <Label text="Item 1"/> 
     <Label text="Item 2"/> 
     <Label text="Item 3"/> 
     <Label text="Item 4"/> 
     </StackLayout> 

    </StackLayout> 
    </drawer:SideDrawer.drawerContent> 
</drawer:SideDrawer> 
`, 
}) 
export class AppComponent { 
    public counter: number = 16; 
    public get message(): string { 
     if (this.counter > 0) { 
      return this.counter + " taps left"; 
     } else { 
      return "Hoorraaay! \nYou are ready to start building!"; 
     } 
    } 

    public onTap() { 
     this.counter--; 
    } 
}

当我在我的模拟器中运行这个时，我得到一个空白页。我使用AngularJS2和typescript &这两款工具都是全新的。所以，无法理解我做错了什么。

需要一些指南。

来源

2016-06-22 mi6crazyheart

nativescript-Telerik的-UI \ ListView和sidedrawer是以前2.0.0 RC.1所以他们目前正在使用它，你可以检查此链接 - https://github.com/telerik/nativescript-ui-samples-angular/issues/1#issuecomment-225791969
如果您正在使用测试版的角度然后检查此链接存储库 - https://github.com/telerik/nativescript-ui-samples-angular/tree/release/sdkAngular/app/sidedrawer

来源

2016-06-22 05:50:39

感谢您的信息。我尝试了你的第二个建议。但是，似乎这个代码库和telerik团队在本月末发布了一个新版本时出现了一些问题。 'https：// github.com/telerik/nativescript-ui-samples-angular/issues/1'。所以，计划再等一会儿。 – mi6crazyheart

如何使用Telerik的UI插件在为NativeScript应用程序方面的抽屉

回答

相关问题