NativeScript:toggleDrawerState不是函数错误 [英] NativeScript: toggleDrawerState not a function error
问题描述
我正在尝试使用本机脚本创建示例应用程序.通过参考 http: //docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started :
I'm trying to create a sample application in native script. I used RadSideDrawer for sidemenu in the following way by referencing http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started :
<RadSideDrawer [transition]="RevealTransition" #drawer>
<StackLayout tkDrawerContent class="sideStackLayout">
<StackLayout class="sideTitleStackLayout">
<Label text="Navigation Menu"></Label>
</StackLayout>
<StackLayout class="sideStackLayout">
<Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
<Label text="Social" class="sideLabel"></Label>
<Label text="Promotions" class="sideLabel"></Label>
<Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
<Label text="Important" class="sideLabel"></Label>
<Label text="Starred" class="sideLabel"></Label>
<Label text="Sent Mail" class="sideLabel"></Label>
<Label text="Drafts" class="sideLabel"></Label>
</StackLayout>
</StackLayout>
<StackLayout tkMainContent>
<GridLayout rows="*">
<page-router-outlet ></page-router-outlet>
<ActivityIndicator #activityIndicator horizontalAlignment="center" verticalAlignment="center" width="100" height="100" row="0"></ActivityIndicator>
</GridLayout>
</StackLayout>
</RadSideDrawer>
在我的app.component.ts中,我给出了:
In my app.component.ts, I've given :
import {RadSideDrawer} from "nativescript-telerik-ui/sidedrawer";
@ViewChild("drawer") drawer : ElementRef;
和
public toggleDrawer(){
let drawer = <RadSideDrawer>this.drawer.nativeElement;
drawer.toggleDrawerState();
}
问题是,每当我尝试执行toggleDrawer()时,都会出现错误:
The problem is that whenever I'm trying to execute toggleDrawer(), I'm getting an error :
drawer.toggleDrawerState not a function.
可能出了什么问题?我将this.drawer作为[object Object],并将this.drawer.nativeElement作为ProxyViewContainer(5),这意味着它正在标识元素,但无法调用toggleDrawerState();
What could be gone wrong? I'm getting a this.drawer as an [object Object] and this.drawer.nativeElement as ProxyViewContainer(5), that means it is identifying the element, but cannot call toggleDrawerState();
现在样式也失真了,现在它在主视图中列出了tkDrawerContent,而我看不到我在tkMainContent中指定的原始页面内容.
Also the style is distorted now, it is now listing the tkDrawerContent in the main view and I'm not able to see the original page contents I specified in tkMainContent.
推荐答案
RadSideDrawer(在N + Angular2项目中)需要考虑一些事项.
There are some things to consider with RadSideDrawer (in N+Angular2 project).
1.)您有一种特殊的输入方式
1.) You have a special import for typings
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
2.)您需要在组件的构造函数中实现ChangeDetectorRef
2.) You need to implement ChangeDetectorRef in the constructor of your component
import { Component, ElementRef, ViewChild, Injectable, OnInit, ChangeDetectorRef } from "@angular/core";
.....
constructor(private page: Page, private _changeDetectionRef: ChangeDetectorRef) {
super();
}
3.)在ngAfterViewInit中,使用像这样的ChangeDetectorRef
3.) In ngAfterViewInit use the ChangeDetectorRef like this
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
this._changeDetectionRef.detectChanges();
}
4.)最终使用的抽屉方法是微不足道的
4.) Finally uses the drawer method is trivial
public toggleDrawer() {
this.drawer.toggleDrawerState();
}
.....
<Button text="TOGGLE DRAWER" (tap)=toggleDrawer()></Button>
使用RadSideDrawer和angular的完整示例可以找到
The full example for using RadSideDrawer with angular can be found here
这篇关于NativeScript:toggleDrawerState不是函数错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!