Question

我想自定义这个丑陋的确认框：'localhost 4200 say ...”

我正在使用Angular7，并且几乎没有编程经验。有很多使用sweetalert，jQuery等的JavaScript示例。但是我需要一个Typescript ...任何想法如何编辑此确认函数以显示我的自定义框？

//我的打字稿文件

Search_for_person("Gülseren")

//我的html文件

deleteBook(_id: string, form: NgForm) {
     if(confirm('Are you sure you want to delete it?')) {
       this.bookService.deleteBook(_id)
         .subscribe(res => {
           this.getBooks();
           this.resetForm(form);

         });
     }
   }

Answer 1

为此使用ngx-bootstrap。

在您的HTML中：

  <button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
    <br><br>
    <pre class="card card-block card-header">{{message}}</pre>
    <ng-template #template>
      <div class="modal-body text-center">
        <p>Do you want to confirm?</p>
        <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
        <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
      </div>
    </ng-template>

在您的组件中

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-service-confirm-window',
  templateUrl: './service-confirm-window.html'
})
export class DemoModalServiceConfirmWindowComponent {
  modalRef: BsModalRef;
  message: string;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
  }

  confirm(): void {
    this.message = 'Confirmed!';
    this.modalRef.hide();
  }

  decline(): void {
    this.message = 'Declined!';
    this.modalRef.hide();
  }
}

使用TypeScript自定义确认框

1 个答案: