第一次调用时，只更改我的确认服务按钮的文本

Question

我有一个确认服务，当被调用时打开一个MatDialog，显示按钮YES没有或并根据答案返回true或false。我的问题是，当我第一次调用这个确认服务时，我希望按钮的文本是类似于"Delete All">和"Delete ">而不是是没有和． 然后在第一次调用这个服务之后，根据答案(我们说Delete All)，它将被再次调用，但是使用正常的文本YES没有和确认。

我试着创建另一个类似于这个的服务，只改变按钮的文本，但似乎不正确的是，所有这些复制只为它。这是我的代码。 CONFIRM.COMPONENT.HTML

<h1 matDialogTitle class="mb-05">{{ data.title }}</h1>
<div mat-dialog-content class="mb-1">{{ data.message }}</div>
<div mat-dialog-actions>
    <button type="button" mat-raised-button color="primary" (click)="dialogRef.close(true)">YES</button>
    &nbsp;
    <span fxFlex></span>
    <button type="button" color="secondary" mat-raised-button (click)="dialogRef.close(false)">NO</button>
</div>
<div>&nbsp;</div>

CONFIRM.COMPONENT.TS

@Component({
  selector: 'uic-confirm',
  templateUrl: './confirm.component.html'
})
export class AppConfirmComponent {
  constructor(
    public dialogRef: MatDialogRef<AppConfirmComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) { }
}

CONFIRM.SERVICE.TS

interface ConfirmData {
  title?: string;
  message?: string;
}
@Injectable()
export class AppConfirmService {
  constructor(private dialog: MatDialog) { }
  public confirm(data: ConfirmData = {}): Observable<boolean> {
    data.title = data.title || '';
    data.message = data.message || '';
    let dialogRef: MatDialogRef<AppConfirmComponent>;
    dialogRef = this.dialog.open(AppConfirmComponent, {
      width: '380px',
      disableClose: true,
      data: { title: data.title, message: data.message }
    });
    return dialogRef.afterClosed();
  }
}

SEARCH.COMPONENT.TS 我要把它命名为Service

    deleteDistribution(row) {
      this.confirmService.confirm({message: 'Do you want to delete all or delete single one?'})
      .subscribe((res) => {
        if (res) {
        this.confirmService
            .confirm({message: `Are you sure you want to delete all?`})
            .subscribe((res) => {
               if (res) {
                // do something
               }
            });
        } else {
          // choose to delete one, go somewhere else
        }
      });
    }

Answer 1

你离解决方案很近了。通过使用角度插值来显示消息。您可以对按钮文本执行相同的操作:

<button type="button" color="secondary" mat-raised-button (click)="dialogRef.close(false)">{{data.actionYesLabel}}</button>
<button type="button" color="secondary" mat-raised-button (click)="dialogRef.close(false)">{{data.actionNoLabel}}</button>

调整确认方法以传递按钮标签值:

 public confirm(data: ConfirmData = {}): Observable<boolean> {
    data.title = data.title || '';
    data.message = data.message || '';
    let dialogRef: MatDialogRef<AppConfirmComponent>;
    dialogRef = this.dialog.open(AppConfirmComponent, {
      width: '380px',
      disableClose: true,
      data: { title: data.title, message: data.message, actionNoLabel: data.actionNoLabel, actionYesLabel: data.actionYesLabel }
    });
    return dialogRef.afterClosed();
  }

然后在调用confirm方法时传递按钮标签值:

this.confirmService.confirm({message: 'Do you want to delete all or delete single one?', actionYesLabel: 'yes', actionNoLabel: 'no'})

每次调用confirm方法时，您都可以为操作按钮传递新的标签。

我希望这对你有帮助。