时间戳

首页 > 解决方案 > 无法从 NS6 中的自定义组件中捕获事件

nativescript - 无法从 NS6 中的自定义组件中捕获事件

问题描述

我正在使用 NS 6.0 核心。在物理 Android 设备上进行测试（尚未在 iOS 上尝试过）。

简而言之，我有嵌套组件，在内部组件中，我想捕获一个自定义事件并将其传递给主机组件。

内部组件（称为 TopBar）：

<StackLayout padding="10" orintation="horizontal" loaded="onLoaded">
  <Label text="&#xe907;" class="wa" fontSize="24" vertcalAlignment="middle" tap="back" />
</StackLayout>

import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout';
import { EventData } from 'tns-core-modules/ui/core/view/view';

var stack: StackLayout;
let eventData: EventData = {
    eventName: "onBackEvent",
    object: stack
}

export function onLoaded(args) {
    stack = <StackLayout>args.object;
}

export function back() {
    stack.notify(eventData);
}

主机组件

import { Page } from "tns-core-modules/ui/page/page";
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout/stack-layout";
import { EventData, Observable } from "tns-core-modules/data/observable";

var model: Observable = new Observable();
var page: Page;

export function onLoaded(args: EventData) {
    page = <Page>args.object;

    var topBar: StackLayout = page.getViewById('topBar');
    topBar.on('onBackEvent', () => {
        console.log('go back');
    });

    page.bindingContext = model;
}

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:tb="components/shared/top-bar/top-bar" loaded="onLoaded" actionBarHidden="true">
    <GridLayout rows="*, 75" columns="*">
        <StackLayout class="page-content">
            <tb:TopBar id="topBar" height="50"></tb:TopBar>

        </StackLayout>
    </GridLayout>
</Page>

关于我可能遗漏的任何想法？

谢谢

标签： nativescript

解决方案

{N}自动修剪以 开头的事件名称on，因此onBackEvent将被记录为BackEventonly。所以通知onBackEvent不会有任何效果。

在我看来，这是有道理的，当我上次检查 Angular 并没有使用支持on以事件绑定为前缀的事件名称时也是如此。这也可能是他们不得不将其作为标准措施的原因。

推荐阅读