Angular 9 - выход из поля ввода означает возникновение несвязанного события - PullRequest
Новая
       40

Angular 9 - выход из поля ввода означает возникновение несвязанного события

0 голосов
/ 21 февраля 2020

У меня есть дочерний компонент, из которого я передаю данные и отображаю его в родительском компоненте. Родительский компонент передает ему число и 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 переменная в родительском контейнере.

Я понимаю, что мог бы добавить оператор if в функцию countChange, но думаю, что я делаю что-то не так.

1 Ответ

0 голосов
/ 21 февраля 2020

Как отметил @ developer033 в комментариях, событие change конфликтует с собственным событием изменения в текстовом вводе. Таким образом, просто изменение названия события устранило проблему.

...