Angular 5 Event Emitter сработал дважды

Question

Я использую угловой 5. В котором я передаю данные из одного компонента в другой компонент, используя Eventemitter.

При первом щелчке по источнику событий не подписывается значение в дочернем компоненте. При втором клике событие-излучатель срабатывает дважды.

Заголовок component.ts

 this.testservice.sendsearchdata.next( this.searchdataform.value)

Поиск component.ts

this.testservice.sendsearchdata.subscribe(value=>{ 
    console.log( value)
})

testservice.ts

  public testservice: EventEmitter<any> = new EventEmitter ():

При передаче данных реактивной формы из компонента заголовка в поисковый компонент он не срабатывает с первого щелчка. При следующем нажатии он сработал дважды.

Answer 1

Я думаю, что вы неправильно используете EventEmitter. Используется, когда дочерний компонент отправляет события родительскому компоненту через свойство @Output(). В вашем случае компонентная связь реализована с помощью сервиса. Попробуйте так:

@Injectable()
export class MissionService {

  // Observable string sources
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();

  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();

  // Service message commands
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }

  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }
}

Родитель и дети общаются через сервис

Answer 2

Мой источник событий был связан с событием нажатия кнопки. <button class="signin-button btn-primary btn" (click)="submit()">Create Account</button>

Путем переключения кнопки ввода тега.<a class="signin-button btn-primary btn" (click)="submit()">Create Account</a>

Он перестал запускать более одного события.

Answer 3

Не уверен, что это кому-нибудь поможет. У меня была аналогичная ситуация, когда объект EventEmitter, который у меня был, назывался «изменение» для ввода текста. Я думаю, что это противоречило событию изменения DOM. Когда я переименовал EventEmitter в «namechange», событие не запускалось дважды.

Answer 4

если вы не укажете какой-либо тип (или type ="submit") в форме, это вызовет двойной EventEmitter вместо single, поэтому вы должны указать type ="button", например:

       <button type="button" (click)="emitMe()">
 </button>