自定义对话框组件中的 EventEmitter

Question

我有一个自定义对话框组件，我不想在对话框组件内部使用服务，而是想使用事件发射器并在父组件中订阅它。

这可能吗？

Answer 1

angular2-mdl it is possible. Here is a working plnkr that demonstrates how this works: http://plnkr.co/edit/MSBlJm2ZKtTvMSgf27Yd?p=preview

版本 2.0.0

您需要创建一个常规组件：

@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();
  }
}

html 如下所示：

<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>

如您所见，有两个按钮。每次单击按钮时都会触发数字 1。另一个按钮关闭对话框。

现在是有趣的部分：如何使用它。您需要创建一个嵌入的 mdl-dialog 并将您的组件作为内容：

   <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>

mdl-dialog 由 testDialog 常量引用，并注册了一个发射器。如果单击该按钮，将显示该对话框。如果您单击 "Fire event" 按钮，事件将被外部组件捕获，并且计数器会增加以证明它有效。这是屏幕截图：

自定义对话框组件中的 EventEmitter

EventEmitter in custom dialog component

angular

material-design-lite

angular2-mdl