自定义对话框组件中的EventEmitter

Question

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

这有可能吗？

Answer 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并注册了一个发射器。如果单击该按钮，将显示该对话框。如果单击“Fire事件” - 按钮，外部组件将捕获事件，并且计数器会增加以证明它可以正常工作。这是一个截图：