确认对话框打开时，如何防止重新加载我的页面？

Question

我正在使用angular-svg-round-progressbar创建动态加载程序。我具有停止加载程序的功能，但是我需要创建一个确认对话框，使您可以停止加载程序或继续运行。为此，我使用了角形材质对话框，但是问题是当对话框弹出时，加载程序继续加载，并且无论我单击是还是否（在对话框中），它都完成了加载。

这是我的完成功能：

   finish() {
    this.current = this.max;
    this.dialogService.openConfirmDialog('On hold.Do you want to cancel this 
    Sprint ? ')
    .afterClosed().subscribe((result: boolean) => {
     if (result) {
     alert('gonna submit it!');
     }
     });
     }

这是我的加载器HTML：

    <main class="content">

    <h1>Here's your timer !</h1>

    <div class="progress-wrapper" *ngIf="maxVal">

    <div class="text" *ngIf="!isFinished">
      {{ max - current | number: '1.1-1' }}
    </div>

    <div class="text" *ngIf="isFinished">
      ding!
      <audio src="assets/chime.mp3" autoplay></audio>
    </div>

    <round-progress [max]="maxVal" [current]="currentVal" [radius]="100" [stroke]="25">
    </round-progress>

    </div>

    <div class="controls-wrapper">
    <div>
      <label>Focus on yout task :) ! </label>
      <br> <br>
      <input class="input" placeholder="number of seconds" type="text" [(ngModel)]="max" (keydown)="reset()">
     </div>
     <button class="button is-danger" *ngIf="!isFinished" (click)="finish()">Finish</button>
  </div>


     </main>

这是对话框服务：

export class DialogService {

  constructor( private dialog: MatDialog) { }

  openConfirmDialog(msg){
    return this.dialog.open(MatConfirmDialogComponent, {
      width :'350px',
      position: { top : "10px"},
      panelClass: 'confirm-dialog-container',
      disableClose : true,
      data : {
            message : msg
      }
    });
  }
}

这是我的全部内容：

import { Component, OnInit, Input } from '@angular/core';
import { SprintService } from '../services/sprint.service';
import { NotificationService } from '../services/notification.service';
import { Sprint } from '../../../sprint';
import { ProgressCircleComponent } from '../progress-circle/progress-circle.component';
import { InteractionService } from '../services/interaction.service';
import { DialogService } from '../shared/dialog.service';
import { Observable } from 'rxjs';
import { resetComponentState } from '@angular/core/src/render3/instructions';
import { MatDialog, MatSnackBar } from '@angular/material';



@Component({
  selector: 'sprint-card',
  templateUrl: './sprintCard.component.html',
  styleUrls: ['./sprintCard.component.css'],
  providers: [SprintService, NotificationService]
})

export class SprintCardComponent implements OnInit {

  @Input()
  sprints: Sprint[];
  durationSec: number;
  duration: string;
  public selectedSprint: any;



  constructor(private sprintService: SprintService, private notificationService: NotificationService, 
    private interactionService: InteractionService, private dialogService: DialogService,
    private dialog: MatDialog,
    private snackBar: MatSnackBar) {
    this.sprintService.getSprints()
      .subscribe(sprints => {
        this.sprints = sprints;

      });
  }

  ngOnInit() {

    this.interactionService.sprintData$
      .subscribe(selectedSprint => {
        this.selectedSprint = selectedSprint;
        console.log(selectedSprint)
      });
  }    


  startLoader() {      
    this.max = this.selectedSprint.duration;
    const interval = Observable.interval(this.selectedSprint.duration);
    interval
      .takeWhile(_ => !this.isFinished)
      .do(i => this.current += 1)
      .subscribe();
  }

  max = 1;
  current = 0;


  stopLoader() {
    this.current = this.max;
    this.dialogService.openConfirmDialog('On hold.Do you want to cancel this Sprint ? ')
      .afterClosed().subscribe((result: boolean) => {
        if (result) {
          alert('you stoppped the loader at x ');
        }
      });     
  }

  /// reset timer
  reset() {
    this.current = 0;
  }

  /// Getters to prevent NaN errors

  get maxVal() {
    return isNaN(this.max) || this.max < 0.1 ? 0.1 : this.max;
  }

  get currentVal() {
    return isNaN(this.current) || this.current < 0 ? 0 : this.current;
  }

  get isFinished() {
    return this.currentVal >= this.maxVal;
  }   
}