NativeScript：toggleDrawerState 不是函数错误

Posted 2023-04-13

【中文标题】NativeScript：toggleDrawerState 不是函数错误

【英文标题】：NativeScript: toggleDrawerState not a function error

【发布时间】：2017-02-06 22:33:31

【问题描述】：

我正在尝试在本机脚本中创建示例应用程序。我通过引用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"    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 中指定的原始页面内容。

【问题讨论】：

抱歉，您从哪里获得 .nativeElement，因为我在 API 参考中的任何地方都没有看到它

查看 nativescript 教程 docs.nativescript.org/tutorial/ng-chapter-4 中的第 4 章。我正在使用此方法获取其他元素，只有 RadSideDrawer 有问题。

它是ElementRef中的一个属性

【参考方案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.) 最后使用drawer方法很简单

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


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

使用 RadSideDrawer 的完整示例可以在here找到。

【讨论】：

在第三步中，我收到一个错误 this.drawerComponent is undefined.

如果我使用 @ViewChild("drawer")drawerComponent: RadSideDrawerComponent; 我会得到一个 [object Object]但是 this.drawerComponent.sideDrawer 越来越未定义。

不要通过 id 获取您的抽屉：从这里查看工作演示 github.com/telerik/nativescript-ui-samples-angular/blob/release/…

如果我使用该方法，我会在您在这里提到的第三步中获得 this.drawerComponent 的未定义值。

发现了错误，我没有在我的 app.module.ts 中注入 SIEDRAWER_DIRECTIVES。感谢您的帮助！