Telerik的Nativescript用户界面中的Sidedrawer不支持Angular2项目

时间:2016-10-06 12:48:54

标签: javascript angular nativescript angular2-nativescript nativescript-telerik-ui

嗨,有人!

我正在使用Angular2和Typescript试验this package和我的Nativescript应用程序的问题。

当我运行应用程序并点击应该调用我的侧边栏的按钮时,我得到下一个未处理的错误:

com.tns.NativeScriptException: 
Calling js method onClick failed

Error: Error in app.component.html:26:35 caused by: self.context.openDrawer is not a function

完整的错误日志将在帖子的末尾,但这是我认为与修复此问题相关的日志的一部分。

我的main.ts有下一个导入和声明:

import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import drawerModule = require("nativescript-telerik-ui/sidedrawer");
import { SIDEDRAWER_DIRECTIVES } from "nativescript-telerik-ui/sidedrawer/angular";

@NgModule({
declarations: [AppComponent, SIDEDRAWER_DIRECTIVES],
bootstrap: [AppComponent],
imports: [NativeScriptModule],
})

我的app.component.html有按钮执行有问题的功能:

<StackLayout tkMainContent>
    <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
    <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
</StackLayout>

这是我的AppComponent

中的app.component.ts课程
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--;
}

@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;

public openDrawer() {
    this.drawer.showDrawer();
}
}

在这种情况下,代码按钮有一个(点按)属性,可以执行 openDrawer(),这是一个来自sidedrawer指令的函数。

这是我在此事中所遵循的文件:

这是完整的错误日志,以防我忘记提及其他内容:

com.tns.NativeScriptException: 
Calling js method onClick failed

Error: Error in app.component.html:26:35 caused by: self.context.openDrawer is not a function
File: "/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js, line: 9668, column: 20

StackTrace: 
Frame: function:'DebugAppView._rethrowWithContext', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9668, column: 21
Frame: function:'', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9681, column: 27
Frame: function:'', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/renderer.js', line: 221, column: 26
Frame: function:'ZoneDelegate.invoke', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 190, column: 28
Frame: function:'NgZoneImpl.inner.inner.fork.onInvoke', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6220, column: 41
Frame: function:'ZoneDelegate.invoke', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 189, column: 34
Frame: function:'Zone.run', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 83, column: 43
Frame: function:'NgZoneImpl.runInner', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6247, column: 75
Frame: function:'NgZone.run', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6477, column: 70
Frame: function:'zonedCallback', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/nativescript-angular/renderer.js', line: 220, column: 24
Frame: function:'Observable.notify', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/data/observable/observable.js', line: 149, column: 23
Frame: function:'Observable._emit', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/data/observable/observable.js', line: 168, column: 18
Frame: function:'_android.setOnClickListener.android.view.View.OnClickListener.onClick', file:'/data/data/org.nativescript.nbapp/files/app/tns_modules/ui/button/button.js', line: 33, column: 32


at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
at com.tns.Runtime.callJSMethod(Runtime.java:716)
at com.tns.Runtime.callJSMethod(Runtime.java:697)
at com.tns.Runtime.callJSMethod(Runtime.java:687)
at com.tns.gen.android.view.View_OnClickListener.onClick(android.view.View$OnClickListener.java)
at android.view.View.performClick(View.java:4764)
at android.view.View$PerformClick.run(View.java:19844)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:135)
at android.app.ActivityThread.main(ActivityThread.java:5297)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:908)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:703)

非常感谢您提前,我希望您能帮助我,请告诉我您是否需要我提供有关此问题的其他信息。

0 个答案:

没有答案