Ich habe eine benutzerdefinierte Dialogkomponente und anstelle eines Dienstes innerhalb der Dialogkomponente möchte ich einen Ereignisemitter verwenden und abonnieren Sie in der übergeordneten Komponente.EventEmitter in benutzerdefinierten Dialogfeld Komponente
Ist das möglich?
Mit Version 2.0.0 von angular2-mdl ist es möglich. Hier ist ein funktionierendes plnkr, die zeigt, wie das funktioniert: http://plnkr.co/edit/MSBlJm2ZKtTvMSgf27Yd?p=preview
Sie benötigen eine regelmäßige Komponente zu erstellen:
@Component({
selector: 'dialog-content',
templateUrl: 'dialog-content.component.html'
})
export class DialogContentComponent {
@Output() emitter = new EventEmitter();
@Input() dialog: MdlDialogComponent;
// or this way: constructor(private dialog: MdlDialogComponent){}
fireEvent() {
this.emitter.emit(1);
}
closeDialog() {
this.dialog.close();
}
}
Die html wie sieht folgende:
<p>
<button
mdl-button
mdl-button-type="raised"
mdl-colored="primary"
mdl-ripple
(click)="fireEvent()">Fire event</button>
<button
mdl-button
mdl-button-type="raised"
mdl-colored="accent"
mdl-ripple
(click)="closeDialog()">Close dialog </button>
</p>
Wie Sie sehen, gibt es zwei Tasten. Bei jedem Klick auf die Schaltfläche wird die Nummer 1 ausgelöst. Die andere Schaltfläche schließt den Dialog.
Jetzt der interessante Teil: wie man das benutzt. Sie müssen eine mdl-dialog mit Ihrer Komponente als Inhalt eingebettet erstellen:
<button
mdl-button
mdl-button-type="raised"
mdl-colored="primary"
mdl-ripple
(click)="testDialog.show()">Open dialog</button>
Counter: {{counter}}
<mdl-dialog #testDialog>
<dialog-content [dialog]="testDialog" (emitter)="onEmitting($event)"></dialog-content>
</mdl-dialog>
Die mdl-dialog durch die testDialog Konstante verwiesen wird, und ein Emitter registriert ist. Wenn Sie auf die Schaltfläche klicken, wird der Dialog angezeigt. Wenn Sie auf den "Fire event" -Button klicken, wird das Ereignis von der äußeren Komponente erfasst und ein Zähler wird erhöht, um zu zeigen, dass es funktioniert. Hier ist ein Screenshot:
