显示对话框后如何创建进度条

Question

我有一个页面，其中有一个运行 button.If 我点击运行按钮出现一个对话框，其中有两个选项是和 No.If 用户点击是的，我想显示一个进度条。我对在哪里编写 mat-progress bar 的 html 代码以及从哪里调用它感到困惑。

HTML代码：

<mat-toolbar>
                        <div class="col-md-offset-11">
                            <button
                                mat-raised-button
                                mat-hint="Execute Query on Whole DataSet"
                                color="primary"
                                (click)="executeOnFullData()"
                            >
                                Run
                            </button>
                        </div>
                    </mat-toolbar>

TypeScript 代码：

    executeOnFullData() {
    const dialogRef = this.dialog.open(ConfirmJobRunComponent, {
    });

    dialogRef.afterClosed()
}

HTML 对话框代码：

<div class="card">
<div class="card-header"><h5 class="title">Confirm</h5></div>
<div class="content">
    <h3 mat-dialog-title>
        Are you sure you want to run Recommendation Settings on the entire
        Dataset?
    </h3>

    <div mat-dialog-actions>
        <button
            mat-button
            [mat-dialog-close]="true"
            (click)="confirmSelection()"
        >
            Yes
        </button>
        <button mat-button (click)="onNoClick()">
            Cancel
        </button>
    </div>
</div>

DialogComponent 的 Typescript 代码

import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
import { Component, Inject } from "@angular/core";
import { RecommendationService } from "../../recommendation- 
service.service";

@Component({
selector: "app-confirm-job-run",
templateUrl: "./confirm-job-run.component.html",
styleUrls: ["./confirm-job-run.component.scss"]
})
export class ConfirmJobRunComponent {
constructor(
    public dialogRef: MatDialogRef<ConfirmJobRunComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dataService: RecommendationService
) {}

onNoClick(): void {
    this.dialogRef.close();
}

confirmSelection(): void {}
}

Answer 1

您可以只订阅 dialogRef 的 afterClosed，然后根据您从对话中返回的结果（点击是 returns true，点击否 returns false) 然后你可以显示一个 mat-progress 并执行你的业务逻辑。

Here is a stackblitz showing how this could look like. The mat-progress is currently indeterminate and not waiting for something to complete, that is up to you.

模板（在按钮所在的组件中）

<mat-progress-bar *ngIf="showMatProgress" mode="indeterminate"></mat-progress-bar>

上述模板的组件

showMatProgress: boolean = false;

executeOnFullData() {
  const dialogRef = this.dialog.open(ConfirmJobRunComponent, {});

  dialogRef.afterClosed().subscribe((result) => {
    this.showMatProgress = result;
  });
}

对话框组件中的一个

onNoClick(): void {
  this.dialogRef.close(false);
}

confirmSelection(): void {
  this.dialogRef.close(true);
}

显示对话框后如何创建进度条

How to create a mat-progress bar after showing a dialog box

javascript

typescript

angular-material

angular

angular7