NativeScript：toggleDrawerState不是函数错误-Java 学习之路

我正在尝试在本机脚本中创建示例应用程序 . 我通过引用http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started以下列方式使用RadSideDrawer作为sidemenu：

<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中，我给出了：

import {RadSideDrawer} from "nativescript-telerik-ui/sidedrawer";

@ViewChild("drawer") drawer : ElementRef;

和

public toggleDrawer(){
        let drawer = <RadSideDrawer>this.drawer.nativeElement;
        drawer.toggleDrawerState();
    }

问题是每当我尝试执行toggleDrawer（）时，我都会收到错误：

drawer.toggleDrawerState not a function.

可能出了什么问题？我得到一个this.drawer作为[object Object]而this.drawer.nativeElement作为ProxyViewContainer（5），这意味着它正在识别元素，但不能调用toggleDrawerState（）;

现在样式也被扭曲了，它现在在主视图中列出了tkDrawerContent，我无法看到我在tkMainContent中指定的原始页面内容 .

1 回答

RadSideDrawer需要考虑一些事情（在N Angular2项目中） .

1.）您有特殊的打字输入

import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";

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

2.）您需要在组件的构造函数中实现ChangeDetectorRef

import { Component, ElementRef, ViewChild, Injectable, OnInit, ChangeDetectorRef } from "@angular/core";
.....
constructor(private page: Page, private _changeDetectionRef: ChangeDetectorRef) {
        super();
}

3.）在ngAfterViewInit中使用这样的ChangeDetectorRef

ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
}

4.）最后使用抽屉方法是微不足道的

public toggleDrawer() {
    this.drawer.toggleDrawerState();
}

.....
<Button text="TOGGLE DRAWER" (tap)=toggleDrawer()></Button>

可以找到使用带角度的RadSideDrawer的完整示例here

回复于 2024-04-30T06:22:17+08:00

NativeScript：toggleDrawerState不是函数错误

1 回答

相关问题