如何在angular 4中为确认框创建单独的组件

ng generate component confirm-dialog

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.css']
})
export class ConfirmDialogComponent {
  @Input() message: string;
  @Input() title: string;
  @Output() confirm: EventEmitter<boolean> = new EventEmitter<boolean>();

  onConfirm() {
    this.confirm.emit(true);
  }

  onCancel() {
    this.confirm.emit(false);
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponent {
  confirmMessage = 'Are you sure?';
  confirmTitle = 'Confirmation';

  onConfirmDialogResult(result: boolean) {
    if (result) {
      // 用户确认操作
    } else {
      // 用户取消操作
    }
  }
}

<app-confirm-dialog [message]="confirmMessage" [title]="confirmTitle" (confirm)="onConfirmDialogResult($event)"></app-confirm-dialog>