Angular 5 Modal закрыть программно - PullRequest
Новая
       10

Angular 5 Modal закрыть программно

0 голосов
/ 09 октября 2018

Я использую угловой 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>

Это модальный режим. После выполнения модального задания я хочу закрыть его программно с помощью машинописи.

Iя пытаюсь получить ссылку на модальные как: 

 @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();

1 Ответ

0 голосов
/ 09 октября 2018

Я уже сделал, прежде чем попробовать это только для предложения,

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();      
}

Я надеюсь, это решит вашу проблему. Если возникнет какая-либо ошибка, сообщите мне.

Спасибо,

Муту

...