Question

我需要在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

有什么建议吗？

由于

Answer 1

为了能够使用SideDrawer和RadListview两个组件，您应首先在NativeScriptUISideDrawerModule文件的导入中添加NativeScriptUIListViewModule和app.module.ts。有关如何在SideDrawer中使用ListView的更多信息，请查看下面附带的示例。

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

import { ItemService } from "./item/item.service";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
import { NativeScriptUIListViewModule } from "nativescript-telerik-ui-pro/listview/angular";
import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui-pro/sidedrawer/angular";
@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUIListViewModule,
        NativeScriptUISideDrawerModule
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent
    ],
    providers: [
        ItemService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

items.component.html

<GridLayout rows="" columns="">
<RadSideDrawer #drawer>
    <StackLayout tkDrawerContent class="sideStackLayout" backgroundColor="red">
        <StackLayout class="sideTitleStackLayout" >
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <GridLayout class="sideStackLayout">
            <RadListView [items]="myItems" heigh="400">
                <ng-template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">
                    <StackLayout  orientation="vertical">
                        <Label [text]='"index: " + i'></Label>
                        <Label [text]='"[" + item.id +"] " + item.name'></Label>
                    </StackLayout>
                </ng-template>
            </RadListView>
        </GridLayout>
    </StackLayout>
    <StackLayout tkMainContent>
        <Label text="Main page" textWrap="true" class="drawerContentText"></Label>
    </StackLayout>
</RadSideDrawer>
</GridLayout>

items.component.ts

import { Component, ElementRef, ViewChild, Injectable, AfterViewInit, OnInit, ChangeDetectorRef } from "@angular/core";


class DataItem{
    constructor(public id:number, public name:string){}
}

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent{
    public myItems: Array<DataItem>;
    private counter: number;

    constructor() {
        this.myItems = [];
        this.counter = 0;
        for (var i = 0; i < 50; i++) {
            this.myItems.push(new DataItem(i, "data item " + i));
            this.counter = i;
        }
    }
}

可以在NativeScript的SideDrawer中使用ListView吗？

1 个答案: