Question

我正在使用角度5

<div class="add-popup modal fade" #noteModal id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header gredient-bg">
        <ul class="card-actions icons right-top">
          <li>
            <a href="javascript:void(0)" class="text-white" data-dismiss="modal" aria-label="Close">
              <i class="ti-close"></i>
            </a>
          </li>
        </ul>
        <h4 class="modal-title text-center">Replace Note</h4>
      </div>
      <div class="modal-body">
        <div class="package_summary text-center">
          <p>Please upload a pdf file you want to replace with the existing one. This will replace <strong>{{notesToBeRelaced?.note?.title}}</strong>
          </p>
          <p-fileUpload mode='advanced' #replaceFile name="replace1[]" [url]="getReplaceUrl(notesToBeRelaced?.note?.itemId)" accept="application/pdf" maxFileSize="100000000" (onBeforeSend)="onBeforeSend($event)" (onProgress)="onProgress($event)" (onSelect)="onFileSelect($event)"
            (onUpload)="onReplaceNote($event)" chooseLabel="Select Note">

          </p-fileUpload>
        </div>

      </div>
    </div>
  </div>
</div>

这是一个模态。完成模态任务后，我想用打字稿以编程方式将其关闭。

我正在尝试获取类似modal的引用：

 @ViewChild('noteModal')  noteModal: ElementRef;

绑定数据后，我试图关闭或隐藏模式：

 onReplaceNote(event) {
    this.onReplaceDataBind(JSON.parse(event.xhr.response));
  }
 onReplaceDataBind(data) {
   this.uiNotes.forEach(uiNote => {
     if (uiNote.note.itemId == data.itemId) {
       uiNote.note.title = data.title;
     }
   });
   this.noteModal.nativeElement.hide();
 }

At a point I want to close / hide the modal. like I have tried in this.noteModal.nativeElement.hide();

Answer 1

我已经做完了，只是为了建议而尝试

HTML文件，像这样更改代码，

<a  #closeModal class="text-white" data-dismiss="modal" aria-label="Close" (click)="hideModel();">
   <i class="ti-close"></i>
</a>

打字稿，

@ViewChild('closeModal') private closeModal: ElementRef;
public hideModel() {
        this.closeModal.nativeElement.click();      
}

希望它能解决您的问题，如果有任何错误，请告诉我。

谢谢

穆图

Answer 2

您可以在按钮中使用attr.data-dismiss来关闭模态，例如：（在Angular 10上测试）

<button type="button" class="btn btn-block btn-primary" [attr.data-dismiss]="<expression>" id="saveButton" (click)="action()">

其中< expression >是您要评估的表达式，而action（）是您要调用的方法或函数，例如，验证是否该表格是有效的，使用反应形式：

<button type="button" class="btn btn-block btn-primary" [attr.data-dismiss]="Form.valid ? 'modal' : null" id="saveButton" (click)="saveMyModalInfo()">

这将评估表单是否有效，如果不是有效的数据，则将“指向”为null，否则将“指向”模态。

Angular 5 Modal以编程方式关闭

2 个答案: