Angular 6 - 在 Angular MatDialog 中显示 s3 文件上传下载进度答案

【问题标题】：Angular 6 - Show s3 file upload download progress in Angular MatDialogAngular 6 - 在 Angular MatDialog 中显示 s3 文件上传下载进度
【发布时间】：2018-09-24 04:06:48
【问题描述】：

我想将进度百分比数据从调用组件传递给 MatDialog。使用 dialogref 或通过在 Dialog 组件构造函数中注入数据，我只能使用初始值设置变量。但是该值没有更新，因为它在调用组件内更新。

这个想法是在对话框中有一个带有百分比的进度条，以在上传/下载期间阻止用户操作。

【问题讨论】：

标签： angular material-design

【解决方案1】：

您可以使用shared service 或只是为您正在启动对话框的模块创建service，在服务中创建当前进度的Observable 和Subject，模态应该听Observable 等等Subject 只需使用 .next(progressValue) 更新值。

你可以了解更多here，它是关于父子的，但是如果对话框与组件/服务在同一个模块中，应该没有任何问题。

【讨论】：

【解决方案2】：

在getObject函数中使用httpdownloadprogress可以查看下载进度

.on('httpDownloadProgress',(progress) => {     
                 // shows file download progress
        });

这是包含下载功能的完整代码

import { config, SecretsManager, S3 , CognitoIdentityCredentials} from 'aws-sdk';

    const bucket = new S3({
                        accessKeyId: <accessKeyId>,
                        secretAccessKey: <secretAccessKey>,
                        region: <region>
                    });

    const params = {        
                      Bucket: <BucketName>,
                      Key: <fileName>,
                   };

       bucket.getObject(params, (err:any, data:any) =>{
            if (err) {
                 // shows AWS s3 error
             }else{
                 // response of binary data 

             }
        }).on('httpDownloadProgress',(progress) => {     
                 // shows file download progress
        });

【讨论】：