Angular 4 dispatchEvent mit benutzerdefiniertem Ereignis

Question

Mein Requirment ist Ereignis aus dem Code zu einer übergeordneten Hosting-Komponente auslösen.

habe ich die erste Antwort hier als Referenz: angular2 manually firing click event on particular element

Wenn ich das versuchen, es funktioniert gut:

this.itemHost.viewContainerRef.element.nativeElement.dispatchEvent(new Event('click')); 

In der Elternkomponente ich dies schrieb:

(click)="go()" 

Es kommt zu der go-Methode, wenn der obige Code auftritt.

Aber das funktioniert nicht, wenn ich es mit einigen benutzerdefinierten Ereignisnamen zu tun, zum Beispiel:

this.itemHost.viewContainerRef.element.nativeElement.dispatchEvent(new Event('customEvent')); 

und in der übergeordneten Komponente:

(customEvent)="go()" 

Wie kann ich es mit benutzerdefinierten Ereignis tun ?

Answer 1

Ihre Veranstaltung sprudelt nicht. Versuchen Sie es:

.dispatchEvent(new Event('customEvent', { bubbles: true })); 

Plunker Example

Answer 2

Verwenden @Output() haben benutzerdefinierte Ereignisse innerhalb Ihrer Komponenten. Im Beispiel unten wird es beim Klicken auf eine div ausgelöst, aber Sie können es natürlich immer ausstrahlen lassen. Versuchen Sie, die Verwendung von nativeElement so weit wie möglich zu vermeiden, da dies verhindern wird Ihre Anwendung in einer anderen Umgebung ausgeführt wird, aber der Browser

Eltern

@Component({ 
    selector: 'parent', 
    template: `<child (customEvent)="onCustomEvent($event)"></child> 
}) 
export class ParentComponent { 

    onCustomEvent(response: string): void { 
    console.log(response); 
    } 
} 

Kind

@Component({ 
    selector: 'child', 
    template: `<div (click)="customEvent.emit('blabla')"></div> 
}) 
export class ChildComponent { 

    @Output() 
    customEvent: EventEmitter<string> = new EventEmitter<string>(); 

}