Angular 6 - Показывает прогресс загрузки файла s3 в Angular MatDialog

Question

Я хочу передать процентные данные прогресса из вызывающего компонента в MatDialog.Используя dialogref или Injecting data в конструкторе компонента Dialog, я могу установить переменную только с начальным значением.Но значение не обновляется, поскольку оно обновляется внутри вызывающего компонента.

Идея состоит в том, чтобы в диалоговом окне отображался индикатор выполнения с процентом, чтобы блокировать действия пользователя во время загрузки / выгрузки.

Answer 1

используйте httpdownloadprogress в функции getObject, вы можете проверить ход загрузки

.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
        });

Answer 2

Вы можете использовать shared service или просто создать service для вашего модуля, из которого вы запускаете диалог, в сервисе создайте Observable и Subject текущего прогресса, модал должен слушать Observable и далееSubject просто используйте .next(progressValue) для обновления значения.

Вы можете узнать больше здесь , это о родителях и дочерних элементах, но если диалог находится в том же модуле, что и компонент / служба, он не долженНикаких проблем.