Angular 5 个事件发射器触发了两次

Question

我正在使用 angular 5. 我正在使用 eventemitter 将数据从一个组件传递到另一个组件。

一开始点击事件发射器没有订阅 child 组件中的值。第二次点击事件发射器触发两次。

Header 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 ():

将响应式表单数据从 header 组件传递到搜索组件时，它不会在第一次点击时触发。下一次点击它触发了两次。

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 标签。 <a class="signin-button btn-primary btn" (click)="submit()">Create Account</a>

它停止触发多个事件。

Answer 3

如果您没有在表单中指定任何类型（或 type="submit"），它会导致双 EventEmitter 而不是单一的，因此您必须指定 type="button"，例如：

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

Angular 5 个事件发射器触发了两次

Angular 5 event emitter triggered twice

angular

angular5

angular-event-emitter