Question

我一直试图在我的组件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>

RadSideDrawer - 打开抽屉不工作

0 个答案: