Question

我有一个自定义的Angular输入组件，它使用textarea作为输入字段。

如何将回车键事件传播到父表单？

Answer 1

您可以创建一个自定义事件，一旦收到您的回车键事件，该事件将发送给父母。

在您的自定义输入元素中：

@Output() onEnterPressed:EventEmitter<any> = new EventEmmitter<any>();


// Method called on KeyUp event. Using KeyUp as it recommended by Angular for Keyboard events.
handleKeyPressed(keyEvent:KeyboardEvent) {

  if(enter_key_is_pressed) {
    this.onEnterPressed.emit(keyEvent);
  }
}

在父组件模板中：

<custom-input [onEnterPressed]="handleEnterEvent($event)"></custom-input>

在父组件组件类中：

handleEnterEvent(event:KeyboardEvent):void {
  //do_whatever_you_want
}

Answer 2

默认情况下，几乎所有事件（包括keyup事件）都会冒泡到父元素。

实施例

<form (keyup.enter)="addAction('form')">
  <textarea (keyup.enter)="addAction('textarea')"></textarea>
  <input-component (keyup.enter)="addAction('input')"></input-component>
</form>

对于textarea作为组件，enter事件将冒泡到表单。

尝试使用此plunker。

传播输入自定义角度输入

2 个答案:

实施例