Question

我想在页面右侧的项目中添加侧抽屉。我按照http://docs.telerik.com上的解决方案，但它对我不起作用。有一些错误。这是我的代码：

app.component.html

          <!-- >> sidedrawer-getting-started-xml -->
<!-- >> sidedrawer-namespace-xml -->
<nsDrawer:RadSideDrawer id="sideDrawer">
  <nsDrawer:RadSideDrawer.drawerContent>
    <StackLayout backgroundColor="gray">
      <StackLayout height="56" style="text-align: center; vertical-align: center;">
        <Label text="Navigation Menu"/>
      </StackLayout>
      <StackLayout>
        <Label text="Primary" padding="10" backgroundColor="lightgray"/>
        <Label text="Social" padding="10"/>
        <Label text="Promotions" padding="10" />
        <Label text="Labels" padding="10" backgroundColor="lightgray" />
        <Label text="Important" padding="10" />
        <Label text="Starred" padding="10" />
        <Label text="Sent Mail" padding="10" />
        <Label text="Drafts" padding="10" />
      </StackLayout>
      <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" tap="{{ onCloseDrawerTap }}"/>

    </StackLayout>
  </nsDrawer:RadSideDrawer.drawerContent>

  <nsDrawer:RadSideDrawer.mainContent>
    <StackLayout >
      <Label text="{{ mainContentText }}" textWrap="true" fontSize="13" padding="10" />

      <Button text="Open drawer" tap="{{ onOpenDrawerTap }}" margin="10" style="horizontal-align: left" />

    </StackLayout>
  </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>
<!-- << sidedrawer-getting-started-xml -->

app.component.ts

   import { Component } from "@angular/core";
import viewModelModule = require("./getting-started-model");
import frame = require("ui/frame");
import drawerModule = require("nativescript-telerik-ui-pro/sidedrawer");
import observableModule = require("data/observable");


// >> sidedrawer-getting-started-model
export class GettingStartedViewModel extends observableModule.Observable {
    constructor() {
        super();
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
    }

    public onOpenDrawerTap() {
        let sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.showDrawer();
    }

    public onCloseDrawerTap() {
        let sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.closeDrawer();
    }
}

export class DataItem {
    constructor(public itemDesc: string) {}
}

@Component({
    selector: "tab-view-test",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    drawer :GettingStartedViewModel;
     opendrawer() : void{
         this.drawer.onOpenDrawerTap();
     }

}

   export function pageLoaded(args) {
    console.log("Page loaded");
    var page = args.object;
    page.bindingContext = new viewModelModule.GettingStartedViewModel();
}

app.module.ts

 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from 'nativescript-telerik-ui-pro/sidedrawer/angular'

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, NativeScriptUISideDrawerModule ],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

错误在这里：

Error calling module function

Error calling module function

Error: com.tns.NativeScriptException: Failed to find module: "nativescript-telerik-ui-pro/sidedrawer/angular", relative to: app/tns_modules/
   com.tns.Module.resolvePathHelper(Module.java:159)
   com.tns.Module.resolvePath(Module.java:60)
   com.tns.Runtime.runModule(Native Method)
   com.tns.Runtime.runModule(Runtime.java:580)
   com.tns.Runtime.run(Runtime.java:574)
   com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:17)
   android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1007)
   android.app.ActivityThread.handleBindApplication(ActivityThread.java:4728)
   android.app.ActivityThread.access$1600(ActivityThread.java:148)
   android.app.ActivityThread$H.handleMessage(ActivityThread.java:1379)
   android.os.Handler.dispatchMessage(Handler.java:99)
   android.os.Looper.loop(Looper.java:137)
   android.app.ActivityThread.main(ActivityThread.java:5478)
   java.lang.reflect.Method.invokeNative(Native Method)
   java.lang.reflect.Method.invoke(Method.java:525)
   com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:875)
   com.android.internal.os.ZygoteInit.main(ZygoteInit.java:691)
   dalvik.system.NativeStart.main(Native Method)
File: "<unknown>, line: 1, column: 265

屏幕截图：

Answer 1

您的代码似乎遇到了多个问题。该错误表明您可能正在使用不兼容的版本。由于只有一个新版本的nativeScript 3.0.0引入了一些重大更改，您应该验证您使用的是正确的兼容版本的 nativescript-telerik-ui-pro

截至目前，这些是兼容版本：

fdr NativeScript 3.0.0 - use nativescript-telerik-ui-pro 2.0.1
fdr NativeScript 2.5.x - use nativescript-telerik-ui-pro 1.6.1

我在您的代码中看到的另一个问题是您正在使用非Angular应用程序的语法（其中名称空间在XML文件中导入，例如nsDrawer:RadSideDrawer）。但是，在Angular中，语法不同。最好的方法是在Angular here

中查看侧抽屉的入门示例

e.g。的 得到-started.component.html

<RadSideDrawer tkExampleTitle tkToggleNavButton> <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> <Button text="Close Drawer" (tap)="onCloseDrawerTap()"></Button> </StackLayout> <StackLayout tkMainContent> <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label> <Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button> </StackLayout> </RadSideDrawer>

请注意，我们直接使用 RadSideDrawer 而不是命名空间。

然后在组件文件
中
import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from "@angular/core"; import { Page } from "ui/page"; import { ActionItem } from "ui/action-bar"; import { Observable } from "data/observable"; import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular"; import { RadSideDrawer } from 'nativescript-telerik-ui-pro/sidedrawer'; @Component({ moduleId: module.id, selector: "tk-sidedrawer-getting-started", templateUrl: 'getting-started.component.html', styleUrls: ['getting-started.component.css'] }) export class SideDrawerGettingStartedComponent implements AfterViewInit, OnInit { private _mainContentText: string; constructor(private _changeDetectionRef: ChangeDetectorRef) { } @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent; private drawer: RadSideDrawer; ngAfterViewInit() { this.drawer = this.drawerComponent.sideDrawer; this._changeDetectionRef.detectChanges(); } ngOnInit() { this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer."; } get mainContentText() { return this._mainContentText; } set mainContentText(value: string) { this._mainContentText = value; } public openDrawer() { this.drawer.showDrawer(); } public onCloseDrawerTap() { this.drawer.closeDrawer(); } }

使用角度2将侧抽屉添加到nativescript项目

1 个答案: