Question

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

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

我的问题：

为什么当我在文本框中手动输入值时，更改事件正在调用。？，而我仅在this.change.emit(this.count);函数内定义了Increment\Decrement。
当我通过Increment\Decrement按钮进行更改时，我在app组件（父级）中获得了正确的更改值，但是，当我手动输入值时，我得到[object Event]没有打字的号码。为什么这样？

反击组件：

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);
  }  
}

app组件：

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（事件）;

事件{isTrusted：true，输入：＆＃34;更改＆＃34;，目标： input.ng-untouched.ng-valid.ng-dirty，currentTarget：counter， eventPhase：3 ...}

Answer 1

处理事件时角度的主要思想是除了内置@Output事件之外还能够使用任何标准DOM事件。

所以当你写

(change)="handler($event)"

对于这两种情况，

angular将调用handler：

当您有@Output() change并致电change.emit()
在输入元素上触发了标准change事件

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

<强> Fixed Plunker

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

1 个答案: