如何在Angular Kendo中覆盖对话，以获取开放和关闭方法？

Question

我想拦截开放和关闭的事件以放置验证逻辑，但是在所有对话框的级别上，因此最理想的解决方案是覆盖dialogservice

Answer 1

在某些情况下，最好捕获太大的系统中的开放和关闭事件，无法重构项目的每个实例。

该解决方案是在下一个URL中：

https：//stackblitz.com/edit/edit/edit/angular-98yhlh-b7hiyf?file = src%2fapp%2fapp%2fpapp%2fpapp； 2f％40progress％2fkendo-angular-dialog％2fdialog％2fdialog.service.d.t.ts

import { Component, ComponentRef, Injectable } from '@angular/core';
import {
  DialogService,
  DialogRef,
  DialogCloseResult,
} from '@progress/kendo-angular-dialog';
import { DialogResult } from '@progress/kendo-angular-dialog/dialog/models/dialog-result';
import { DialogSettings } from '@progress/kendo-angular-dialog/dialog/models/dialog-settings';
import { DialogComponent } from '@progress/kendo-angular-dialog/main';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <div class="example-config" *ngIf="result">
        Dialog result: {{ result }}
      </div>
      <button kendoButton (click)="showConfirmation()">Please confirm</button>
    </div>

    <div kendoDialogContainer></div>
  `,
})
export class AppComponent {
  constructor(private dialogService: MyDialogService) {}

  public result;

  public showConfirmation(): void {
    const dialog: MyDialogRef = this.dialogService.open({
      title: 'Please confirm',
      content: 'Are you sure?',
      actions: [{ text: 'No' }, { text: 'Yes', themeColor: 'primary' }],
      width: 450,
      height: 200,
      minWidth: 250,
    });

    dialog.result.subscribe((result) => {
      if (result instanceof DialogCloseResult) {
        //console.log('close');
      } else {
       // console.log('action', result);
      }
      this.result = JSON.stringify(result);
    });
  }
}

@Injectable({ providedIn: 'root' })
export class MyDialogService extends DialogService {
  open(options: DialogSettings): MyDialogRef {
    console.log('is open');
    let dialogOpen  = super.open(options)
    let mydialogref:MyDialogRef = new MyDialogRef(dialogOpen.close,dialogOpen.content,dialogOpen.dialog,dialogOpen.result);
    return mydialogref;
  }
}

export class MyDialogRef implements DialogRef {
  close: Function;
  content: ComponentRef<any>;
  dialog: ComponentRef<DialogComponent>;
  private _result: Observable<DialogResult>;

  constructor(close: Function,
              content: ComponentRef<any>,
              dialog: ComponentRef<DialogComponent>,
              result: Observable<DialogResult>) {
    this.close = close;
    this.content = content;
    this.dialog = dialog;
    this._result = result;
  }


  get result(): Observable<DialogResult> {
    return this._result.pipe(map(r=>{
      console.log("return")
      return r;
    }));
  }

  set result(value: Observable<DialogResult>) {
    this._result = value;
  }
}