RadSideDrawer not working Nativescript angular 2
我对本地脚本很陌生,因为我正在学习实现导航抽屉,我只是以一些错误而告终。RadSideDrawer not working Nativescript angular 2
register.html
<ActionBar title="Custom Title">
<ActionItem ios.systemIcon="9" android.systemIcon="ic_menu_share_holo_light" (tap)="openDrawer()"></ActionItem>
</ActionBar>
<RadSideDrawer #drawer>
<template drawerSide>
<StackLayout class="p bgc-white">
<ListView row="1">
<template let-item="item" let-i="index">
<StackLayout>
<Label text="WWW" class="page-name" ></Label>
</StackLayout>
</template>
</ListView>
</StackLayout>
</template>
<template drawerMain>
<StackLayout class="m">
<user-list></user-list>
</StackLayout>
</template>
</RadSideDrawer>
register.component.ts
import { Component,OnInit,ViewChild,ChangeDetectorRef } from "@angular/core";
import {RadSideDrawerComponent, SideDrawerType} from 'nativescript-telerik-ui/sidedrawer/angular';
@Component({
selector: "register",
templateUrl :"./pages/register/register.html"
})
export class RegisterComponent
{
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
constructor (private _changeDetectionRef: ChangeDetectorRef) {
}
ngAfterViewInit() {
console.log(" FFFFF");
this.drawer = this.drawerComponent.sideDrawer;
this._changeDetectionRef.detectChanges();
}
public openDrawer()
{
this.drawer.toggleDrawerState();
}
}
以下是我得到的日志
promiseReactionJob @ [本地代码] CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3481:36:错误内容:
CONSOLE ERROR file:/// app/tns_modules/@ angular/core /bundles/core.umd.js:3482:36:[object Object]
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:344: 22:错误:错误:0:0造成的:undefined不是一个对象(评估'this.drawerComponent.sideDrawer')
您是否将NativeScriptUiSideDrawerModule导入到您的app.module中?
事情是这样的:
import { NativeScriptUISideDrawerModule } from 'nativescript-telerik-ui/sidedrawer/angular';
@NgModule({
bootstrap: [
AppComponent
],
imports: [
CoreModule,
NativeScriptModule,
PagesModule,
NativeScriptUISideDrawerModule // RIGHT HERE
],
})
export class AppModule { }
它在入门文档概述:http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/getting-started
thankyou @Shawn bug已修复,但仍然没有打开抽屉 –
您可以从''标记删除'#drawer'。而不是它与你的问题有关,但为了帮助你的IDE,你可以让你的类实现'AfterViewInit'。 –