自定义对话框组件中的 EventEmitter答案

【问题标题】：EventEmitter in custom dialog component自定义对话框组件中的 EventEmitter
【发布时间】：2017-02-16 05:49:15
【问题描述】：

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

这可能吗？

【问题讨论】：

标签： angular material-design-lite angular2-mdl

【解决方案1】：

使用 angular2-mdl 的 2.0.0 版本是可能的。这是一个工作 plnkr，它演示了它是如何工作的：http://plnkr.co/edit/MSBlJm2ZKtTvMSgf27Yd?p=preview

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

@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 常量引用，并且发射器已注册。如果单击按钮，将显示对话框。如果您单击“触发事件”按钮，则事件被外部组件捕获，并且计数器会增加以证明它有效。截图如下：

【讨论】：