材质对话框关闭，显示为Fancybox 3。角度8

Question

我在使用mat-dialog和fancybox 3时遇到了一些问题。 我在“材质对话框”中有fancybox元素。 当我打开fancybox对话框时，它很酷，但是当我单击关闭Fancybox对话框时，“材质”对话框也将关闭。

这是我的Fancybox指令：

import {Directive, ElementRef} from "@angular/core";
declare var $: any;

@Directive({
  selector: '[appFancybox]'
})
export class FancyboxDirective {

  constructor(private el: ElementRef) {
    $(this.el.nativeElement).fancybox({
      openEffect: "fade",
      closeEffect: "fade",
      type: "image",
      prevEffect: 'none',
      nextEffect: 'none',
      toolbar : true,
      modal: false,
      buttons: [
        "zoom",
        "share",
        "slideShow",
        "fullScreen",
        "download",
        "thumbs",
        "close"
      ],
      baseTpl:
        '<div class="fancybox-container">' +
        '<div class="fancybox-bg"></div>' +
        '<div class="fancybox-inner">' +
        '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' +
        '<div class="fancybox-toolbar">{{buttons}}</div>' +
        '<div class="fancybox-navigation">{{arrows}}</div>' +
        '<div class="fancybox-stage"></div>' +
        '<div class="fancybox-caption"><div class=""fancybox-caption__body"></div></div>' +
        '</div>' +
        '</div>',
      btnTpl: {
        close:
          '<button data-fancybox-close class="fancybox-button" title="Close!">' +
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"/></svg>' +
          "</button>",
      },
      loop: true
    });
  }

}

还有我的“材质对话框”组件：

<div class="fixActionRow">
<h1 mat-dialog-title>{{data.title}}</h1>
<!--style="height: calc(100% - 96px);"-->
<mat-dialog-content style="height: calc(100% - 96px);">

  <ul class="nav nav-tabs nav-tabs-highlight">
    <li class="nav-item" *ngIf="data.usesTabs.fileUploadTab" (click)="changeActiveTab('fileUploadTab')">
      <a href="#top-icon-upload-tab1" [ngClass]="{active: data.activeTab === 'fileUploadTab'}" class="nav-link" data-toggle="tab">
        <div>
          <i class="icon-upload d-block mb-1 mt-1"></i>
          Загрузка из файла
        </div>
      </a>
    </li>
    <li class="nav-item" *ngIf="data.usesTabs.linkUploadTab" (click)="changeActiveTab('linkUploadTab')">
      <a href="#top-icon-upload-tab2" [ngClass]="{active: data.activeTab === 'linkUploadTab'}" class="nav-link"
         data-toggle="tab">
        <div>
          <i class="icon-link d-block mb-1 mt-1"></i>
          Загрузка по сылке
        </div>
      </a>
    </li>
  </ul>


  <div class="tab-content">

    <div *ngIf="data.usesTabs.fileUploadTab"
         [ngClass]="{active: data.activeTab === 'fileUploadTab', show: data.activeTab === 'fileUploadTab'}"
         class="tab-pane fade"
         id="top-icon-upload-tab1">
      <div class="uploadfilecontainer text-center" (click)="fileInput.click()" appDragDrop (onFileDropped)="uploadFile($event)">
        <input hidden type="file" [multiple]="data.multipleUpload" #fileInput (change)="uploadFile($event.target.files)">
      </div>
      <form [formGroup]="imagesForm" *ngIf="activeTab === 'fileUploadTab'">
        <div formArrayName="images">
        <div class="files-list" *ngFor="let image of imagesControl.controls; let imageIndex = index;" [formGroupName]="imageIndex">
        <div class="card" [hidden]="image.get('dataPreview').value === ''">
          <div class="card-img-actions m-1 upload-thumb">
            <img class="card-img img-fluid" [src]="image.get('dataPreview').value">

            <div class="card-img-actions-overlay card-img">
              <a [href]="image.get('dataPreview').value"
                 appFancybox
                 rel="gallery1"
                 class="btn btn-outline bg-white text-white border-white border-2 btn-icon rounded-round"
                 [attr.data-fancybox]="image.get('dataPreview').value != null ? 'gallery' : ''">
                <i class="icon-zoomin3"></i>
              </a>
            </div>

          </div>
        </div>

        <div class="img-meta-desc">
          <input type="text" class="form-control" [value]="image.get('name').value" formControlName="name" placeholder="Введите название картинки...">
          <input type="text" class="form-control mt-1" [value]="image.get('description').value" formControlName="description" placeholder="Введите Alt описание...">
        </div>
        <!--<p> {{ image.get('name').value }} </p>-->
        <button class="delete-file align-content-end" (click)="deleteAttachment(imageIndex)">
          <img src="/assets/images/Recycle_Bin_Full.png">
        </button>
      </div>
        </div>
      </form>

      <div class="row" *ngIf="activeTab === 'fileUploadTab' && uploadedImages.length > 0">
        <div class="col-sm-6 col-xl-3" *ngFor="let img of uploadedImages; let imageIndex = index">
          <div class="card">
            <div class="card-img-actions mx-1 mt-1">
              <img class="card-img img-fluid" [src]="img.thumbnails['135']" alt="">
              <div class="card-img-actions-overlay card-img">
                <a [href]="img.full"
                   appFancybox
                   rel="gallery-uploaded"
                  class="btn btn-outline bg-white text-white border-white border-2 btn-icon rounded-round"
                  data-popup="lightbox"
                   data-fancybox="gallery">
                  <i class="icon-eye"></i>
                </a>
              </div>
            </div>

            <div class="card-body">
              <div class="d-flex align-items-start flex-nowrap">
                <div>
                  <div class="font-weight-semibold mr-2">{{img.name}}</div>
                </div>

                <div class="list-icons list-icons-extended ml-auto">
                  <a (click)="removeUploadedImage(img, imageIndex)" class="list-icons-item hover-pink"><i class="icon-bin top-0"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>



  </div>



</mat-dialog-content>

  <div class="spacer"></div>

  <mat-dialog-actions align="end" class="text-center">
    <button (click)="onNoClick()" type="button" class="btn btn-link" data-dismiss="modal">Отмена</button>
    <button (click)="submit()" type="button" class="btn bg-primary">{{submitText}}</button>
  </mat-dialog-actions>


</div>

如何调试关闭Fancybox对话框的事件？