Question

我正在将角5用于材料5。

我想打开一个新的模态，但是之前请关闭上一个模态。它工作正常，但问题是我编写了一个custome指令来拖动我的模态。该指令也可以正常运行，但仅在第一个模式下有效。每当我单击一个按钮并打开一个新模式并关闭上一个模式时，可拖动指令便停止工作。

我被困在这里，为什么会发生

我的 html 我从那里调用了一种打开模式的方法

  <button
    mat-raised-button (click)="openDialog()">Pick one</button>

此html的TS文件方法

openDialog(): void {
    this.dialog.closeAll();
    const dialogRef = this.dialog.open(ZoomComponent, {
      height: '70vh',
      width: '26em',
      position: { right: '60px' },
      data: {name: 'John Doe'},
      hasBackdrop: false,
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

放置指令的DialogComponent HTML

<div class="toolbar">
  <mat-icon matTooltip="Hold and move to drag" class="drager hand"
            [draggable] dragHandle=".drager"
            dragTarget=".cdk-overlay-pane">
    drag_indicator
  </mat-icon>
  <h2 class="title m-b-10" mat-dialog-title>{{data.name}}
  </h2>
  <mat-icon matTooltip="Close" class="close" (click)="dialogRef.close()">close</mat-icon>
</div>
<mat-dialog-content>
  <ngx-image-viewer  [src]="['assets/ima.jpg']"  [config]="config"></ngx-image-viewer>
</mat-dialog-content>

最后是Draggable指令

import {AfterViewInit, Directive, ElementRef, Input, NgZone, OnDestroy} from '@angular/core';
import { Observable, } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/map';



@Directive({
  selector: '[draggable]'
})
export class DraggableDirectiveDirective implements AfterViewInit, OnDestroy  {
  @Input() dragHandle: string;
  @Input() dragTarget: string;

  // Element to be dragged
  private target: HTMLElement;
  // Drag handle
  private handle: HTMLElement;
  private delta = {x: 0, y: 0};
  private offset = {x: 0, y: 0};

  private destroy$ = new Subject<void>();

  constructor(private elementRef: ElementRef, private zone: NgZone) {
  }

  public ngAfterViewInit(): void {
    this.handle = this.dragHandle ? document.querySelector(this.dragHandle) as HTMLElement :
      this.elementRef.nativeElement;
    this.target = document.querySelector(this.dragTarget) as HTMLElement;
    this.setupEvents();
  }

  public ngOnDestroy(): void {
    this.destroy$.next();
  }

  private setupEvents() {
    this.zone.runOutsideAngular(() => {
      const mousedown$ = Observable.fromEvent(this.handle, 'mousedown');
      const mousemove$ = Observable.fromEvent(document, 'mousemove');
      const mouseup$ = Observable.fromEvent(document, 'mouseup');

      const mousedrag$ = mousedown$.switchMap((event: MouseEvent) => {
        const startX = event.clientX;
        const startY = event.clientY;

        return mousemove$
        // tslint:disable-next-line:no-shadowed-variable
          .map((event: MouseEvent) => {
            event.preventDefault();
            this.delta = {
              x: event.clientX - startX,
              y: event.clientY - startY
            };
          })
          .takeUntil(mouseup$);
      }).takeUntil(this.destroy$);

      mousedrag$.subscribe(() => {
        if (this.delta.x === 0 && this.delta.y === 0) {
          return;
        }

        this.translate();
      });

      mouseup$.takeUntil(this.destroy$).subscribe(() => {
        this.offset.x += this.delta.x;
        this.offset.y += this.delta.y;
        this.delta = {x: 0, y: 0};
      });
    });
  }

  private translate() {
    requestAnimationFrame(() => {
      this.target.style.transform = `
        translate(${this.offset.x + this.delta.x}px,
                  ${this.offset.y + this.delta.y}px)
      `;
    });
  }
}

请为我提供一个好的解决方案

打开一个新模态，但使用材质在角度5中关闭上一个模态

0 个答案: