我需要在NativeScript中实现 SideDrawer
,其菜单条目可以根据某些条件动态更改 .
我决定使用 ListView
来显示菜单条目,因为列表可能很长并且可能需要滚动 .
但是,我似乎无法让它工作,我找不到原因 . NativeScript for Angular的文档有点不完整,我不确定我是否正确组装这些部分 .
SideDrawer
正常工作,但未显示 ListView
. 请注意,如果我使用 StackLayout
而不是 ListView
添加元素,则会显示它们 .
这是我正在研究的模板:
<ActionBar title="Inline" >
<NavigationButton [visibility]="hideDrawer || (isAndroid ? 'visible' : 'collapse')" icon="res://ic_menu" (tap)="onDrawerTap()"></NavigationButton>
<ActionItem [visibility]="hideDrawer || (isAndroid ? 'collapse' : 'visible')" icon="res://ic_menu" ios.position="right" (tap)="onDrawerTap()"></ActionItem>
</ActionBar>
<RadSideDrawer #drawer>
<StackLayout tkDrawerContent class="sideStackLayout">
<GridLayout>
<RadListView [items]="menuEntries" orientation="vertical">
<template tkListItemTemplate let-item="item">
<StackLayout>
<Label [text]="item.label" class="sideLabel"></Label>
</StackLayout>
</template>
</RadListView>
</GridLayout>
</StackLayout>
<StackLayout tkMainContent>
</StackLayout>
</RadSideDrawer>
这是组件的代码,我删除了不相关的逻辑:
import * as application from "application";
import { Component, ViewChild, OnInit } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";
import * as applicationSettings from "application-settings";
class MenuEntry {
constructor(
public label: string,
public url: string
){}
}
@Component({
selector: "main-container",
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild(RadSideDrawerComponent)
public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
isAndroid:boolean = application.android !== null;
hideDrawer = false;
menuEntries:Array<MenuEntry> = [];
constructor() {}
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
}
public onDrawerTap() {
this.drawer.toggleDrawerState();
}
public closeDrawer(){
this.drawer.closeDrawer();
}
ngOnInit(){
this.generateMenu();
}
private generateMenu(): void {
this.menuEntries.push(
new MenuEntry("LABEL1", "/place1"),
new MenuEntry("LABEL2", "/place2")
);
}
}
我正在使用:
-
nativescript:2.2.1
-
nativescript-angular:0.3.1
-
nativescript-telerik-ui:1.3.1
有什么建议?
谢谢
1 回答
为了能够使用Both
SideDrawer
和RadListview
组件,您应首先在app.module.ts
文件的导入中添加NativeScriptUISideDrawerModule
和NativeScriptUIListViewModule
. 有关如何在SideDrawer中使用ListView的更多信息,请查看下面附带的示例 .app.module.ts
items.component.html
items.component.ts