角度 5 事件发射器触发两次

Question

我正在使用角度5。其中我使用 eventemitter 将数据从一个组件传递到另一个组件。

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

标头组件.ts

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

搜索组件.ts

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

testservice.ts

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

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

Answer 1

我认为您错误地使用了事件发射器。当子组件通过 @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>