html - Signaturepad 清除属性未在模式引导对话框中清除

Question

我正在处理签名板对话框，对于对话框，我正在使用引导模式。在此活动中，当我单击完成活动时，应打开一个对话框，询问是或否，单击是，一个对话框，在模态正文中带有签名板，在模态页脚中清除按钮。

问题是当从模态页脚单击清除按钮时，签名板模块的清除方法不起作用任何建议都会有很大帮助

import { Component, OnInit, ViewChild, Directive } from '@angular/core';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {SignaturePad} from 'angular2-signaturepad/signature-pad';
import { ClickOutsideModule } from 'ng-click-outside';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {

  @ViewChild('SignaturePad1', { static: true })signaturepad: SignaturePad;

  public signaturepadoption = {
    minWidth: 2,
    penColor: 'rgb(255,0,0)',
    backgroundColor: 'rgb(0,0,0)',
    canvasWidth: 250,
    canvasHeight: 300,
  };

  closeResult: string;

  constructor(private modalService: NgbModal) {}

  openSm(content) {
    this.modalService.open(content, { centered: true });
  }

  SignaturepadPopUp(longContent) {
    this.modalService.open(longContent, { scrollable: true, centered: true });
  }

  onClear() {
    this.signaturepad.clear();
  }

  saveSignature() {
    const base64 = this.signaturepad.toDataURL('image\png', 0.1);
    console.log(base64);
    const blob = this.base64toblob(base64);
    console.log(blob);

  }
  base64toblob(base64) {
    const bytestring = atob(base64.split(',')[1]);
    const stringtype = base64.split(',')[0].split(':')[1].split(':')[0];
    const size = bytestring.length;
    const saveString: any[] = new Array(size);

    for (let i = 0; i < bytestring.length; i++) {
      saveString[i] = bytestring.charAt(i);
    }
    const ia = new Uint8Array(saveString);
    return new Blob([ia], {type: stringtype});
  }

}

<ng-template #content let-modal>
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Are you sure You want to complete Activity?</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="modal.close('Close click')">No</button>
    <button type="button" class="btn btn-primary" (click)="SignaturepadPopUp(longContent)">Yes</button>
  </div>
</ng-template>

<ng-template #longContent let-modal>
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="col-md-12">
      <div class="m-signature-pad">
          <div class="m-signature-pad-body">
              <signature-pad #SignaturePad1 [options]="signaturepadoption"></signature-pad>
          </div>
      </div>
  </div>
  </div>
  <button type="button" class="btn btn-primary" (click)="onClear()">clear</button>
</ng-template>

<button class="btn btn-secondary" (click)="openSm(content)">Complete Activity</button>

标签： htmlangulartypescriptbootstrap-modal