如何在aurelia中创建自定义的textchanged事件

Question

textchanged事件消费者应该传递事件而不是控制。消费者将在textchange事件中执行代码。组件只会公开该事件。 ???这是要求如何在aurelia中创建？

组分

textbox.html

<input type="text" class="form-control change.delegate="inputValueChange()">

textbox.ts

constructor() {

  }

  attached() {
    this.controller.validateTrigger = validateTrigger.changeOrBlur;
    this.controller.addRenderer(new BootstrapFormRenderer());
    this.controller.validate();
   } 

    public inputValueChange(newValue,oldValue){
      console.log(newValue)
      }
    }

app.html

<template>
<textbox  maxlength="10" autocomplete="on"></textbox>
<template>

Answer 1

您可以使用自定义事件-在文本框组件中将其添加到构造函数中：

constructor(private element: Element) {}

并且在inputValueChange中添加如下内容：

let event = new CustomEvent('textchange', { 
        detail: <some-data-you-want-to-send>,
        bubbles: true
    });

this.element.dispatchEvent(event);

然后您应该能够像这样使用新的textchange事件：

<textbox  maxlength="10" autocomplete="on" textchange.delegate="someFunction()"></textbox>

PS！在您的示例中，在窗体控件之后/ change.delegate之前缺少“，这可能会阻止现在完全调用inputValueChange的]