Question

我有一个页面，其中有一个运行按钮。如果单击运行按钮，则会出现一个对话框，其中包含两个选项：是和否;如果用户单击是，则要显示进度条。我对于在哪里编写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的打字稿代码

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

您可以只订阅afterClosed中的dialogRef，然后根据从对话框中返回的结果（单击“是”返回true，单击“否”返回false）然后，您可以显示mat-progress并执行您的业务逻辑。

Here 是一个堆栈闪电战，展示了它的外观。 mat-progress 目前不确定，不等待完成某件事，这取决于您。

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

<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);
}

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

1 个答案: