angular - Angular 对话框的奇怪行为

Question

我有一个对话框，在您angular app第一次使用时按预期工作。它包含一堆复选框，允许用户选择应用程序要跟踪的设备。但是，在我第二次显示它之后，单击关闭按钮会将数据提交到应用程序，但对话框不会关闭。我必须再次单击关闭。然后，如果我再次打开对话框，我将不得不单击关闭 3 次以关闭对话框。这是在调用组件中打开对话框的位置：

     ngOnInit() {
          this.className = this.constructor.toString().match(/\w+/g)[1];


     // start the spinner
     this.loadingSubject.next(true);
     /**
      * List of all devices is coming from an observable managed by
      * the DeviceManagerService. We subscribe (block) on that data
      * being returned, we can't build up the dialog of checkbox id's
      * until we have that data.
      */
     this.deviceManagerService.getAllDevices().subscribe((devices) => {
       this.dataSource = devices;
       console.log('devices are: ', this.dataSource);
       this.loadingSubject.next(false);
       this.dialogConfig.disableClose = true;
       this.dialogConfig.autoFocus = true;

       this.dialogConfig.data = this.dataSource;

       const dialogRef = this.trackDeviceDialogComponent.open(TrackDeviceDialogComponent, this.dialogConfig );

       dialogRef.afterClosed().subscribe(result => {
           this.devicesToTrack = result[0];
           this.devicesToTrackService.publishIMEIs(this.devicesToTrack);
           console.log('IMEIs to track from dialog:', this.devicesToTrack);
       });

     });

   }

在我从设备管理器服务后面的 observable 接收数据之前，我无法显示对话框，这就是为什么我将它内置在订阅中的原因。关闭对话框的代码没有什么异常：

  close() {
    // Filter out the unselected ids
    const selectedDevices = [];
    /**
     * Loop thru array of deviceNames looking for every item that has its checkbox
     * checked. For each check, grab the imei associated with that object and push
     * it into the selected devices array which is what will be returned from
     * this to the caller, tracking.component.
     */
    this.deviceForm.value.deviceNames
      .map((checked, index) =>  {
        checked ? selectedDevices.push(this.deviceNames[index].imei) : null;
      })
      .filter(value => value !== null);
    const returnData = [ selectedDevices, this.dateTimeRange ];
    this.dialogRef.close( returnData );
  }

按钮 html 并没有什么特别之处：

   <button class="mat-raised-button " routerLink="/home" (click)="close()">submit</button>

所以当我第三次打开对话框时会发生什么，它加载时有很长的延迟，然后对话框显示为深灰色背景。我第一次单击提交，深灰色消失以显示下面的地图，顶部仍然有浅色阴影，然后在第三次单击后对话框关闭，/homerouterlink 将我带到地图。

我在这里的设计有什么根本错误吗？

标签： angulardialog