angular - Angular 5 事件发射器触发了两次

Question

我正在使用 Angular 5。其中我使用事件发射器将数据从一个组件传递到另一个组件。

在第一次单击事件发射器不订阅子组件中的值。在第二次点击事件发射器触发两次。

头组件.ts

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

搜索component.ts

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

测试服务.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 标签。 <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>