时间戳

首页 > 解决方案 > 如何将数据或警报消息从服务传递回组件

angular - 如何将数据或警报消息从服务传递回组件

问题描述

我正在使用 Angular 6，我在 3 个不同的屏幕（3 个不同的组件）上有上传文件控件，它们都调用相同的方法 UploadFile() 但问题是每当我必须对此方法进行任何更改时，我都必须更新这种方法在所有 3 个地方。所以，我想用这个方法 UploadFile() 创建一个服务（非共享），这样我就必须在一个地方进行更改并被所有 3 个屏幕调用。我有一个挑战，即如何返回警报消息以及如何将来自该服务内的另一个服务的成功、失败响应返回给组件。


@Injectable({
  providedIn: 'root'
})

export class MyFileUploader {

  fileuploadList: EventUpload[];
  eventId: Number;
  constructor(private dateFormatHelper: DateFormatHelper, private manageService: ManageService) {
  }

public UploadFile(event) {
     const fileList: FileList = event.target.files;
     if (fileList.length > 0) {
         const file: File = fileList[0];
         const extension = fileList[0].name.split('.').pop();

        if (this.fileuploadList.find( f => f.fileName === file.name)) {
           alert('Duplicate file identified!');
           return;
        }
         const formData: FormData = new FormData();
         const params = Object.assign({}, {
              Id: 0,
             F ileName: file.name,
              FilePath: 'XXXXXX', 

         });
         formData.append('uploadFile', file, params.FileName);
         formData.append('data', JSON.stringify(params));
         this.manageService.uploadAttachments(formData).subscribe (resp => {
           if (resp === -1 ) {
             alert('Error occured while uploading the attachment');
             return;
            } else {
              this.fileuploadList.push (new DataUpload (0, params.FileName, 
           params.CreatedBy,));
             }
         },
       (error) => {
         console.log('POST ERROR in method uploadAttachments: ' + error.error);
       }
       );
     }
 }
}

标签： angulartypescript

解决方案

您的UploadFile方法可以返回一个主题。像这样的东西：

public UploadFile(event) {
 const uploadSubject: Subject<any> = new Subject();
 const fileList: FileList = event.target.files;

像这样导入：

import { Subject } from 'rxjs';

并像这样使用它：

    if (this.fileuploadList.find( f => f.fileName === file.name)) {
       alert('Duplicate file identified!');
       uploadSubject.next('Duplicate');
       uploadSubject.complete();
    }

在调用方：

this.myFileUploaderService.UploadFile(event)
 .subscribe(
   (response) => console.log(response), 
   (error) => console.error(error),
   () => console.log('completed')
)

每次调用 UploadFile 方法时，您都可以订阅 Subject 以接收来自 Service 的信息。

推荐阅读