Angular 如何在动态代码中处理typescript中的按钮

我正在使用，当我想使用from notificationService时，我遇到了一个问题

我无法处理notificationService.smallBox中按下的按钮

我的代码如下：

notificationExample5() {

  this.notificationService.smallBox({
    title: "Ding Dong!",
    content: "Someone's at the door...shall one get it sir? <p class='text-align-right'><a href-void class='btn btn-primary btn-sm'>Yes</a> <a href-void class='btn btn-danger btn-sm'>No</a></p>",
    color: "#296191",
    //timeout: 8000,
    icon: "fa fa-bell swing animated"
  });
}

notificationExample5（）{
这是.notificationService.smallBox({
标题：“叮咚！”，
内容：“有人在门口……先生，要不要来一杯？
”，
颜色：“296191”，
//超时：8000，
图标：“足总钟摆动画”
});
}

---

我怎么能在角度上处理“是”或“否”按钮？

你可以有多种方法来实现它

尝试已回答的解决方案

或者使用为您创建的stackbliz

应用程序组件Ts 应用程序组件HTML 确认框HTML

{{title}}
&时代；
{{message}}
{{btnCancelText}
{{btnOkText}

确认信箱服务

从'@angular/core'导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从'@ng bootstrap/ng bootstrap'导入{NgbModal}；
从“./confirmation dialog.component”导入{ConfirmationDialogComponent}；
@可注射（）
导出类确认对话框服务{
构造函数（私有modalService:NgbModal）{}
公开确认(
标题：字符串，
消息：string，
btnOkText:string='OK'，
btnCancelText:string='Cancel'，
dialogSize:'sm'|'lg'=“sm”）：承诺{
const modalRef=this.modalService.open（ConfirmationDialogComponent，{size:dialogSize}）；
modalRef.componentInstance.title=标题；
modalRef.componentInstance.message=消息；
modalRef.componentInstance.btnOkText=btnOkText；
modalRef.componentInstance.btnCancelText=btnCancelText；
返回modalRef.result；
}
}

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

import { ConfirmationDialogService } from './confirmation-dialog/confirmation-dialog.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private confirmationDialogService: ConfirmationDialogService) {}

  public openConfirmationDialog() {
    this.confirmationDialogService.confirm('Please confirm..', 'Do you really want to ... ?')
    .then((confirmed) => console.log('User confirmed:', confirmed))
    .catch(() => console.log('User dismissed the dialog (e.g., by using ESC, clicking the cross icon, or clicking outside the dialog)'));
  }
}

<button (click)="openConfirmationDialog()" type="button" class="btn btn-primary">Open dialog</button>

<p>Open the console to see log statements.</p>

import { Component, Input, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-confirmation-dialog',
  templateUrl: './confirmation-dialog.component.html',
})
export class ConfirmationDialogComponent implements OnInit {

  @Input() title: string;
  @Input() message: string;
  @Input() btnOkText: string;
  @Input() btnCancelText: string;

  constructor(private activeModal: NgbActiveModal) { }

  ngOnInit() {
  }

  public decline() {
    this.activeModal.close(false);
  }

  public accept() {
    this.activeModal.close(true);
  }

  public dismiss() {
    this.activeModal.dismiss();
  }

}

<div class="modal-header">
  <h4 class="modal-title">{{ title }}</h4>
    <button type="button" class="close" aria-label="Close" (click)="dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    {{ message }}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" (click)="decline()">{{ btnCancelText }}</button>
    <button type="button" class="btn btn-primary" (click)="accept()">{{ btnOkText }}</button>
  </div>

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { ConfirmationDialogComponent } from './confirmation-dialog.component';

@Injectable()
export class ConfirmationDialogService {

  constructor(private modalService: NgbModal) { }

  public confirm(
    title: string,
    message: string,
    btnOkText: string = 'OK',
    btnCancelText: string = 'Cancel',
    dialogSize: 'sm'|'lg' = 'sm'): Promise<boolean> {
    const modalRef = this.modalService.open(ConfirmationDialogComponent, { size: dialogSize });
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.message = message;
    modalRef.componentInstance.btnOkText = btnOkText;
    modalRef.componentInstance.btnCancelText = btnCancelText;

    return modalRef.result;
  }

}