我一直试图在我的组件using the following tutorial中添加一个侧抽屉。
但是每当我点击应该调用openDrawer函数的按钮时,就永远无法访问它。我尝试将tap组件结构化为tap =“{{openDrawer}}”无济于事。
在研究了这个问题后,我找到了git issue that says tap does not work when a css class is present。但是这个项目包含最新版本的NativeScripts,所以它应该不是问题。最后如果我添加
this.drawer.showDrawer();
在ngOnInit()里面它仍然没有出现。控制台中没有错误。
以下是我的代码。
header.component.ts
import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { SearchService } from '../search.service';
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import { Observable } from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-pro-ui/sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-pro-ui/sidedrawer';
@Component({
moduleId: module.id,
selector: 'header-bar',
templateUrl: './header-bar.component.html',
styleUrls: ['./header-bar.component.css']
})
export class HeaderBarComponent implements AfterViewInit, OnInit {
private _mainContentText: string;
constructor(private _changeDetectionRef: ChangeDetectorRef) { }
@ViewChild(RadSideDrawer) public drawerComponent: RadSideDrawerComponent;
private drawer: RadSideDrawer;
ngAfterViewInit() {
//dont think this method is ever executed
this.drawer = this.drawerComponent.sideDrawer;
this._changeDetectionRef.detectChanges();
}
ngOnInit() {
this.openDrawer();
}
public openDrawer() {
console.log(this.drawer); //returns undefined
console.log("Drawer method reached");
this.drawer.showDrawer();
}
public onCloseDrawerTap() {
this.drawer.closeDrawer();
}
}
home.component.html
<RadSideDrawer tkExampleTitle tkToggleNavButton>
<AbsoluteLayout tkMainContent dock="top" >
<Button class="header-bar"></Button>
<Image src="res://logo" height="77" width="95" class="logo"></Image>
<Button left="250" text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>
</AbsoluteLayout>
<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>
<Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
</StackLayout>
</RadSideDrawer>