在 Angular 的服务中使用 Mat-Dialog 时出现问题

Question

我在尝试让 mat-Dialog 在服务中工作时遇到问题。我可以使用 onclick 事件从我的模板调用相同的代码，但是如果我尝试使用此组件使用的服务，它会失败并出现此错误

TypeError: Cannot read properties of undefined (reading 'open')

以下是当用户尝试上传文件时触发的服务代码。它按预期触发它并且所有工作正常，除了我无法显示对话框。想知道我是否必须以某种方式在服务中执行此操作而不是在表单中执行此操作？

import {Inject, Injectable, OnDestroy} from '@angular/core';
import {environment} from '../../environments/environment';
import {switchMap, take, takeWhile} from 'rxjs/operators';
import {ModalImagePropertiesComponent} from '../modules/image-before-upload/modal-image-properties/modal-image-properties.component';
import {IUploadedImageProperties} from '../modules/uploaded-image-properties';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';

@Injectable({
  providedIn: 'root'
})
  constructor(
    private authService: AuthService,
    private http: HttpClient,
    public toasterService: ToasterService,
    @Inject(IgxOverlayService) private overlayService: IgxOverlayService,
    private dialog: MatDialog,
    //@Optional() @Inject(MAT_DIALOG_DATA) public data: any,
    private dialogRef: MatDialogRef<ModalImagePropertiesComponent>,

  ) {
  }
// New Upload Service
  initNewUploadEvents(): Object {
    const _froalaUploadService = this;
    console.log('Calling New Upload')
    return {
      'image.beforeUpload': function (images) {
        // make copies of the data passed in since they are lost after false is returned to froala from this callback
        const copies = {
          editor: this,  // {...editor}, // make full copy of editor object
          // e: {...e}, // make full copy of the event
          images: {...images}, // make full copy of the images
        };
        let imageBase64 = null;
        // create reader
        if (images.length) {
          // Create a File Reader.
          const reader = new FileReader();
          // Set the reader to insert images when they are loaded.
          reader.onload = (ev) => {
            imageBase64 = ev.target['result'];
          // console.log('file reader result ', imageBase64);
          };
          // Read image as base64.
          reader.readAsDataURL(images[0]);
        }

        _froalaUploadService.editorInstance = this;

            const modalInstance = {}
            // Splitting the name (filename) here and taking the first part which represents the name without the extension
            modalInstance.imageProperties = {
              filename: copies.images[0].name.split('.')[0],
              original_filename: copies.images[0].name,
              myFile: imageBase64,
              user_id: _froalaUploadService.userId,
            };

        const dialogRef = this.dialog.open(ModalImagePropertiesComponent,
          {
            data: row,
            disableClose: false, width: '600px', position: {
              top: '50px'
            },
          })
          
            console.log(modalInstance.imageProperties)

      },

Answer 1

我认为 this 的上下文在函数中丢失了。但是您在局部变量 _froalaUploadService = this

中保留引用

const dialogRef = _froalaUploadService.dialog.open(ModalImagePropertiesComponent,
    {
      data: row,
      disableClose: false, width: '600px', position: {
      top: '50px'
    },
  });

在 Angular 的服务中使用 Mat-Dialog 时出现问题

Problem using Mat-Dialog in a Service in Angular

angular-material

angular