Question

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

第一次单击时，事件发射器未在子组件中订阅该值。在第二次单击时，事件发射器触发了两次。

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

在将反应形式数据从标题组件传递到搜索组件时，第一次单击时不会触发。下次单击时，它已触发两次。

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);
  }
}

Parent and children communicate via a service

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>

它停止触发多个事件。

Angular 5事件发射器触发两次

2 个答案: