我'm using Telerik UI plugin in my NativeScript app for implementing drawer functionality.I' m关注本教程 - https://www.nativescript.org/blog/details/using-cross-platform-native-sidedrawer-component-in-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并且对这两个工具都是全新的 . 所以,无法理解我做错了什么 .
需要一些指南 .
1 回答
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