@input 和 @output 装饰器更改事件

Question

查看@input\@output 装饰器的一些代码，我发现了不同的行为。

在下面的代码中，有counter 组件通过@input 装饰器从父app 组件获取其值，并通过@output 装饰器发出更改。

我的问题：

1. 当我在文本框中手动输入值时，为什么会调用更改事件？而我只在 Increment\Decrement 函数中定义了 this.change.emit(this.count);。 ?

2. 当我通过Increment\Decrement 按钮进行更改时，我在app 组件（父级）中得到正确的更改值，但是当我手动输入值时，我得到@987654332 @ 未输入数字。为什么会这样？

代码在Plunker is here.下面

计数器组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'counter',
  template: `
    <div class="counter">
      <button (click)="decrement()">
        Decrement
      </button>
        <input type="text" [(ngModel)]="count">
      <button (click)="increment()">
        Increment
      </button>
    </div>
  `
export class CounterComponent {  
  @Input()
  count: number = 0;

  @Output()
  change: EventEmitter<number> = new EventEmitter<number>();

  increment() {
    this.count++;
    this.change.emit(this.count);
  }

  decrement() {
    this.count--;
    this.change.emit(this.count);
  }  
}

应用组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <counter
        [count]="myCount"
        (change)="countChange($event)">
      </counter>
    </div>
  `
})
export class AppComponent {
  myCount: number = 10;
  countChange(event) {
    console.log(event); //log Event object below
    console.log('change called...!!!');
    this.myCount = event; 
  }
}

我也尝试将输入类型更改为 number，还将绑定更改为 1 方式：[ngModel]="count"，但似乎不起作用。

console.log(event);

事件 {isTrusted: true, type: "change", target: input.ng-untouched.ng-valid.ng-dirty，currentTarget：计数器， 事件阶段：3…}

Answer 1

Angular 在处理事件时的主要思想是能够使用任何标准 DOM 事件以及内置的 @Output 事件。

所以当你写的时候

(change)="handler($event)"

对于这两种情况，angular 都会调用handler：

• 当你有@Output() change并调用change.emit()时

• 当标准change 事件在输入元素上触发时

因此，将您的 @Output 事件替换为 change 以外的其他事件，然后它应该可以按您的预期工作。

Fixed Plunker