对话框关闭后的Angular 6调用函数答案

【问题标题】：Angular 6 calling function after dialog close对话框关闭后的Angular 6调用函数
【发布时间】：2018-09-10 18:24:00
【问题描述】：

我试图在关闭对话框后实现一个函数调用，但我不能使用管道也不能订阅它。让我们看看我的代码。

我收到了这个错误：

Type 'Observable<any>' is not assignable to type 'MatDialogRef<any, any>'.   Property '_overlayRef' is missing in type 'Observable<any>'

想法是在关闭对话框时调用函数this.windowScrolling.disable ();

@Injectable({
  providedIn: 'root'
})
export class NavegarService {
  public offsets: number[];

   windowScrolling: WindowScrollingService;

  constructor(private router: Router,
              private activatedRoute: ActivatedRoute,
              windowScrolling: WindowScrollingService,
              public dialogRef: MatDialogRef <any, any>,
              private dialog: MatDialog) {

    this.windowScrolling = windowScrolling;
    this.offsets = this.range( 1, 20 );
  }

  navegarContext(url: string, event: any = null) {
    this.router.navigate([url], {queryParams: {context: this.activatedRoute.snapshot.queryParams['context']}});
  }

  navegar(url: string, event: any = null) {
    this.router.navigate([url]);
  }

  abrirModal(component: ComponentType<any>, dados: any, event: any = null): MatDialogRef<any, any> {
    this.windowScrolling.disable();
    return this.dialog.open(component, {minWidth: '90%', disableClose: true, data: dados, position: {top: '4%'}}).afterClosed()
      .pipe(); // got error here
  }

  private range( from: number, to: number ): number[] {
    const values = [];
    for ( let i = from ; i <= to ; i++ ) {
      values.push( i );
    }
    return( values );
  }
}

【问题讨论】：

标签： angular typescript dialog

【解决方案1】：

错误消息几乎准确地说明了问题所在：您从该方法返回的对象类型不正确。

要解决这个问题，我们需要创建并存储新对话框，然后创建订阅，最后返回我们刚刚创建的对话框对象。

abrirModal(component: ComponentType<any>, dados: any, event: any = null): MatDialogRef<any, any> {
    this.windowScrolling.disable();

    // Create and store dialog object
    const dialog = this.dialog.open(component, {minWidth: '90%', disableClose: true, data: dados, position: {top: '4%'}});

    // Create subscription
    dialog.afterClosed().subscribe(() => {
        // Do stuff after the dialog has closed
        this.windowScrolling.disable();
    });

    // Return dialog object
    return dialog;
}

【讨论】：