致电服务以打开一个对话框，取决于setTimeout

Question

Hi As I am new to angular 4 I am facing some issue like "Uncaught Error: Can't resolve all parameters for" or Cyclic dependence . I have written a service which does a calculation and in setTimeout I am calling to open the MatDialog . Matdialog has two option 'Yes' or 'no' on click of the 'Yes' doing some service call and doing some calculation and again setting clearTimeout and setting new setTimeout which again open the popup after some time.

And I want to also check on each service call and depending on some condition I have again clearTimeout and set a new setTimeout which open the MatDialog .

I trying this since long time but would not find a solution . I want know Where is the right place that I can place my code and How to write service to open the Matdialog .

Written this code in main.components.ts

setTimer() {

    this.notifyTime = expiryValue - 120000;
    this.date1 = new Date();
    this.date2 = new Date(this.notifyTime);
    this.diff = this.date2.getTime() - this.date1.getTime();
    let _self = this;
    this.timerVar = setTimeout(function () {
        let dialogRef = _self.dialog.open(DialogModalComponent, {
            data: {
                timer: _self.timerVar,
                va: true
            }
        });
    }, this.diff);
}


clearTimer() { 
    clearTimeout(this.timerVar);
}

The above is a piece of code I am using to setTimeout() and clearTimeout()

Written this code in global service where temp points to another to main.component.ts

autoLoad() {

    if (this.expiryValue) {
        this.date1 = new Date();
        this.diff = this.expiryValue - this.date1.getTime();
        if (this.diff < 600000 && this.diff > 120000) {
            this.getUpUrl('refresh').then(result => {
                if (result.status == 'success') {
                    this.temp.clearTimer();
                    this.temp.showDialog(result.sessionExpiry);
                } 
            });
        }
    }

And in the dialog.component.ts

 ok() {
    this.dialog.close();
    this.temp.clearTimer();
    this.temp.setTimer();
 }

cancel() {
    this.dialog.close();
}

The above code I am using in the dialog. temp points to my main.component.ts

Answer 1

you can use a setTimeout function to open a dialog after some time

this example based on angular material examples

  constructor(public _dialogService: DialogService) { }

  openDialog(): void {
    this.clicked = true;
    this._dialogService.open({ name: this.name, animal: this.animal }, () => this.clicked = false)
      .then(result => {
        console.log('The dialog was closed');
        this.animal = result;
      })
  }

dialog service

@Injectable({
  providedIn:'root'
})
export class DialogService {

  constructor(private dialog: MatDialog) { }

  open(data , onOpenCallBack , timeout:number = 2500) : Promise<any> {
    return new Promise((resolve) => {

    setTimeout(() => {

      const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
        width: '250px',
        data: data
      });

      if (onOpenCallBack) {
        onOpenCallBack()
      }

      dialogRef.afterClosed().subscribe(result => {
        resolve(result)  
      });
    }, timeout)
    })
  }
}

stackblitz demo