NativeScript - 事件处理

在每个 GUI 应用程序中，事件在实现用户交互方面都扮演着非常重要的角色。每当用户与应用程序交互时，就会触发事件并执行相应的操作。

例如，当用户单击应用程序登录页面中的登录按钮时，就会触发登录过程。

事件涉及两个参与者 −

• 事件发送者 − 对象，引发实际事件。

• 事件监听器 − 函数，监听特定事件，然后在触发事件时执行。

可观察类

它是一个预定义的类，用于处理事件。它的定义如下 −

const Observable = require("tns-core-modules/data/observable").Observable;

在 NativeScript 中，几乎每个对象都派生自 Observable 类，因此每个对象都支持事件。

事件监听器

在本章中，我们将了解如何创建对象并向对象添加事件监听器。

步骤 1

创建一个按钮，用于生成事件，如下所示 −

const Button = require("tns-core-modules/ui/button").Button;
const testButton = new Button();

步骤 2

接下来，向按钮添加文本，如下所示 −

testButton.text = "Click";

步骤 3

创建一个函数 onTap，如下所示 −

let onTap = function(args) {
   console.log("you clicked!"); 
};

步骤 4

现在将 tap 事件附加到 onTap 函数，如下所示 −

testButton.on("tap", onTap, this);

添加事件监听器的另一种方法如下 −

testButton.addEventListener("tap", onTap, this);

步骤 5

附加事件的另一种方法是通过 UI 本身，如下所示 −

<Button text="click" (tap)="onTap($event)"></Button>

此处，

$event 属于 EventData 类型。 EventData 包含两个属性，如下所示 −

Object − 用于引发事件的 Observable 实例。在此场景中，它是 Button 对象。

EventName − 它是事件名称。在此场景中，它是点击事件。

步骤 6

最后，可以随时分离/移除事件侦听器，如下所示 −

testButton.off(Button.onTap);

您还可以使用其他格式，如下所示 −

testButton.removeEventListener(Button.onTap);

修改 BlankNgApp

让我们修改 BlankNgApp 应用程序以更好地理解 NativeScript 中的事件。

步骤 1

打开 home 组件的 UI，src/app/home/home.component.html 并添加以下代码 −

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<StackLayout> 
   <Button text='Fire an event' class="-primary" color='gray' (tap)='onButtonTap($event)'></Button>
</StackLayout>

此处，

• tap 是事件，Button 是事件引发器。

• onButtonTap 是事件监听器。

步骤 2

打开 home 组件的代码 'src/app/home/home.component.ts' 并更新以下代码 −

import { Component, OnInit } from "@angular/core"; 
import { EventData } from "tns-core-modules/data/observable"; 
import { Button } from "tns-core-modules/ui/button" 
@Component({ 
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // 使用组件构造函数来注入提供程序。
   } 
   ngOnInit(): void { 
      // 在此初始化您的组件属性。
   } 
   onButtonTap(args: EventData): void { 
      console.log(args.eventName); 
      const button = <Button>args.object; 
      console.log(button.text); 
   } 
}

此处，

• 添加了新的事件监听器 onButtonTap。

• 打印事件名称、点击和按钮文本，在控制台中触发事件。

步骤 3

运行应用程序并点击按钮。它会在控制台中打印以下行。

LOG from device <device name>: tap 
LOG from device <device name>: Fire an event