无法接收事件发出的值

Question

the distance-measurment-parameters.component is a child in site-map.component. The method hideWindowOverlay() in distance-measurment-parameters is invoked when a window is closed and it emits and event as shown below. the log statement in the hideWindowOverlay() is displayed which indicates that the event is emitted.

in the component site-map.component, i listen or subscribe to the event 'evtEmitterOnDistanceMeasurementWindowClosed' as follows and as shown in the code below

(evtEmitterOnDistanceMeasurementWindowClosed)=onDistanceMeasurementWindowClosedEvtReceived($event)/>

The problem is, the mehtod onDistanceMeasurementWindowClosedEvtReceived() is never invoked, hence the event is not received.

please let me know how to subscribe to the event 'evtEmitterOnDistanceMeasurementWindowClosed' correctly and how to make the method 'onDistanceMeasurementWindowClosedEvtReceived' method is invoked

in site-map.html :

<clr-toggle-wrapper *ngIf="showMeasureDistance">
<input type="checkbox" clrCheckbox  (change)="toggleDistanceMeasurementOverlay()"  [(checked)]="showMeasureDistanceOverlay"
(evtEmitterOnDistanceMeasurementWindowClosed)=onDistanceMeasurementWindowClosedEvtReceived($event)/>
<label >
    {{ "SITE.MEASURE_DISTANCE" | translate }} 
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_MEASURE_DISTANCE')">
        <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>

</label>
</clr-toggle-wrapper>

distance-measurment-parameters.component :

//declaration of the event emitter
@Output("evtEmitterOnDistanceMeasurementWindowClosed")
evtEmitterOnDistanceMeasurementWindowClosed: EventEmitter<boolean> = new 
EventEmitter<boolean>();

hideWindowOverlay() {
//throw new Error('Method not implemented.');
this.showWindow = false;
this.evtEmitterOnDistanceMeasurementWindowClosed.emit(true);
console.log("hideWindowOverlay: emits event this.evtEmitterOnDistanceMeasurementWindowClosed.emit(true)");//log here are displayed
}

in site-map.component :

onDistanceMeasurementWindowClosedEvtReceived(event: boolean){
    this.toggleDistanceMeasurementOverlay();  
    console.log("onDistanceMeasurementWindowClosedEvtReceived: ");//log are not displayed

}

Answer 1

As I can see you're trying to listen to a evtEmitterOnDistanceMeasurementWindowClosed event from an input element, but input hasn't such event emitter. Try to call onDistanceMeasurementWindowClosedEvtReceived method on some of the built-in input events - onchange eg

Or use [(ngModel)] like this

<input [(ngModel)]="value"
        (ngModelChange)="onDistanceMeasurementWindowClosedEvtReceived($event)"
      />