0

我有一个子组件，我从中传递数据并在父组件中显示。父组件向它传递一个数字和一个 eventEmitter 以允许父组件显示由子组件更新的数据。

父组件

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

@Component({
  selector: 'app-root',
  template: `
    {{ myCount }}
    <app-message-creator
      (change)="countChange($event)"
      [count]="myCount"
      >
    </app-message-creator>
  `,
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'App2';
  myCount: number = 0;

  newMessage: string = "";

  constructor() { }

  countChange(event) {
      this.myCount = event;
  }
}

子组件 消息创建者

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

@Component({
  selector: 'app-message-creator',
  template: `
    <p>message-creator works!</p>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
    <input type="text">
  `
})
export class MessageCreatorComponent {

  messageBox;

  @Input() count: number;

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

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

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

然后我计划让消息创建器组件让用户输入一条消息，它将显示在主组件中。我添加了一个<input type=text>, 但现在如果我在输入框中输入任何文本并且光标离开该框，countChange则会触发事件并且传递event的是类型[Object Event]，它会破坏count父容器中的变量。

我意识到我可以在 countChange 函数中添加一个 if 语句，但我认为我做错了什么。

4

1 回答 1

0

正如@developer033 在评论中指出的那样，该change事件与文本输入上的本机更改事件冲突。因此，只需更改事件的名称即可解决问题。

于 2020-02-21T14:36:46.670 回答