我正在尝试用 native 脚本创建一个示例应用程序。我通过引用 http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started 按以下方式将 RadSideDrawer 用于侧菜单:
<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 中指定的原始页面内容。
最佳答案
使用 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 和 Angular 的完整示例可以在 here 中找到。
关于NativeScript:toggleDrawerState 不是函数错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39756079/