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

Question

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

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

我的问题 :

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

2. 当我通过Increment\Decrement按钮进行更改时,我在app组件(父级)中获得了正确的更改值,但是当我手动键入值时,我得到的[object Event]不是键入的数字.为什么这样 ？

代码如下Plunker在这里.

计数器组件:

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(事件);

事件{isTrusted:true,type:"change",target:input.ng-untouched.ng-valid.ng-dirty,currentTarget:counter,eventPhase:3 ...}

Answer 1

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

所以当你写作

(change)="handler($event)"

angular将调用handler两种情况:

• 什么时候你有@Output() change和叫change.emit()

• 当standart change事件在input元素上触发时

因此,将您的@Output活动替换为其他活动change,然后它应该按预期工作.

固定式弹射器