如何在 aurelia 中創建自定義 textchanged 事件

Question

textchanged 事件消費者應該傳遞事件而不是控制。消費者將在 textchange 事件上執行他們的代碼。 組件只會公開該事件。 ？？？ 這是要求我如何在 aurelia 中創建？

零件

文本框.html

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

文本框.ts

constructor() {

  }

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

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

應用程序.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。 在您的示例中，您在表單控件之后/更改之前缺少一個“，委托，這可能會阻止 inputValueChange 現在被調用