@input和@output修饰符更改事件

查看@input\@output修饰符的某些代码我发现不同的行为。@input和@output修饰符更改事件

在下面的代码，有counter部件经由@input装饰从父app部件获取其值和经由@output装饰发射变化。

我的问题：

为什么当我在手动键入文本价值变动事件呼唤，而我只是里面Increment\Decrement功能定义this.change.emit(this.count);。？。？
当我通过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); 
    } 
}

应用组件：

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：真实，键入： “变化”，目标： input.ng-untouched.ng-valid.ng脏，currentTarget当前：计数器，的EventPhase：3 ...}

来源

2017-06-21 anoop

比'change'以外的东西更换事件名称。它是冒泡的标准事件https://plnkr.co/edit/kcRcSh8tAt4BMt81GvP0?p=preview – yurzui

@yurzui：谢谢!! ..，请发表您的评论作为答案，我会标记它.. – anoop

角色处理事件时的主要想法是除了内置事件之外，还可以使用任何标准DOM事件。

所以，当你写

(change)="handler($event)"

角将调用handler两种情况：

当你有@Output() change并呼吁change.emit()
当非标准change事件输入解雇元素

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

Fixed Plunker

来源

2017-06-21 10:04:33 yurzui

我试图调试这个问题，其中我发现如果我从子组件中删除'@ Input'装饰器并将其分配给public并移除了'[count] =“myCount”'，代码似乎工作正常。我对'（change）'处理程序没有做任何事情。我仍然试图弄清楚这是如何工作的？ –

你可以向这些运动员展示这些变化吗？ – yurzui

当您在输入'$ event'中手动输入值时，因为它是从标准DOM事件引发的，所以是'Event'对象。当你点击Decrement/Increment按钮'$ event'就是你在this.change.emit（this.count）中传递的内容;' – yurzui

@input和@output修饰符更改事件

回答

相关问题