NativeScript中的抽屉不支持TAP手势

时间:2016-07-07 05:35:37

标签: telerik nativescript angular2-nativescript nativescript-telerik-ui

我正在使用Telerik UI for NativeScript。但是,抽屉表现得非常奇怪,Button上的TAP手势正常工作,但是,当我向Label添加TAP手势时,它将无法正常工作。

我添加了

  

(抽头)= openDrawer()

标签上的

。但是当我点击标签时,没有任何反应。

import { Component, ElementRef, ViewChild, Inject, OnInit, ChangeDetectorRef } from "@angular/core";
import { View } from "ui/core/view";
import { RadSideDrawer } from "nativescript-telerik-ui-pro/sidedrawer";
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import sideDrawerModule = require('nativescript-telerik-ui-pro/sidedrawer');
import * as ObservableModule from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";

@Component({
    moduleId: module.id,
    selector: "mp-app",
    templateUrl:'./testdrawer.html',
})
export class TestComponent extends ObservableModule.Observable implements OnInit {
    public mainContentText: string = "Hello World";
    constructor( @Inject(Page) private page: Page, private _changeDetectionRef: ChangeDetectorRef) {
        super();
    }

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

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

    ngOnInit() {
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
    }

    public openDrawer() {
        alert('openDrawer');
        this.drawer.showDrawer();
    }

    public closeDrawer() {
        alert('close drawer');
        this.drawer.closeDrawer();
    }

}
<!-- >> angular-sidedrawer-getting-started -->
<RadSideDrawer #drawer>
    <template drawerSide>
        <StackLayout 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" (tap)=closeDrawer()></Label>
                <Label text="Starred" class="sideLabel"></Label>
                <Label text="Sent Mail" class="sideLabel"></Label>
                <Label text="Drafts" class="sideLabel"></Label>
            </StackLayout>
        </StackLayout>
    </template>
    <template drawerMain>
        <StackLayout>
            <Label [text]="mainContentText" textWrap="true" (tap)=openDrawer() class="drawerContentText"></Label>
            <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
        </StackLayout>
   </template>
</RadSideDrawer>
<!-- << angular-sidedrawer-getting-started -->

1 个答案:

答案 0 :(得分:3)

尝试将您的方法用双引号&#34; &#34;

对于前 - 在您的情况下用于标签点击试试这个 -

(tap)="openDrawer()"

而不是

(tap)=openDrawer()