EventEmitter в пользовательском диалоговом компоненте

Question

У меня есть собственный компонент диалога, и вместо использования службы внутри компонента диалога я хочу использовать источник событий и подписаться на него в родительском компоненте.

Это возможно?

Answer 1

С версией 2.0.0 angular2-mdl это возможно. Вот рабочий 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 постоянный и излучатель зарегистрирован. Если вы нажмете кнопку, появится диалоговое окно. Если вы нажмете кнопку "Событие огня", событие будет отслежено внешним компонентом, и счетчик увеличится, чтобы продемонстрировать, что он работает. Вот скриншот: