4

Sehr einfache Basisklasse CloserAngular 2 Basisklasse Output EventEmitter nicht angehoben oder behandelt bekommt

import {EventEmitter, Output} from 'angular2/core'; 

export class Closer { 
    @Output() closed: EventEmitter<any> = new EventEmitter(); 

    constructor() {} 

    close() { 
    this.closed.emit({}); 
    } 
} 

Wenn ich eine andere Klasse extends Closer und markieren Sie ihn dann nach oben mit

<derived-class (closed)="closeHandler()"></derived-class> 

closeHandler() nie bekommen namens. Ich kann sehen, Closer.close() abgerufen werden, aber die emit wird nicht von der abgeleiteten Klasse propagiert oder behandelt von der Klasse, deren Vorlage die abgeleitete Klasse und Ereignisbindung enthält.

Wenn ich einfach die @Output in die abgeleitete Klasse verschiebe, funktioniert es. Aber es scheint, dass Angular2 das auf abgeleitete Klassen setzen sollte. Die Fähigkeit, ein Verhalten vollständig zu definieren und zu erben, wäre schön.

Antwort

6

Ich hatte das gleiche Problem heute Morgen und habe gerade herausgefunden, wie es geht. Alles, was man zu tun hat, ist Ausgänge hinzuzufügen: [ ‚geschlossen‘] die Komponente Abschnitt der Klasse abgeleitet, die näher und Sie erweitert haben @Output() aus der geschlossenen Erklärung zu entfernen, in der Näher Klasse

Hier ist eine kurze Demo basiert auf Ihrem Beispiel:

Abgeleitete Klasse:

@Component({ 
    selector: 'derived-class', 
    outputs: ['closed'] 
}) 
export class DerivedClass extends Closer {} 

Closer Klasse:

import {EventEmitter} from 'angular2/core'; 

export class Closer { 
    closed: EventEmitter<any> = new EventEmitter(); 

    constructor() {} 

    close() { 
    this.closed.emit({}); 
    } 
} 
+0

Vielen Dank dafür! Bitte beachten Sie, wenn Sie tslint verwenden, können Sie den linter-Fehler mit '// tslint: disable-next-line: use-output-property-decorator' deaktivieren – Jessycormier