2

即使关闭对话框，我也想保持 Md 对话框的状态。这样我就可以在整个应用程序中保持上传状态处于活动状态。我的计划是将上传响应存储在服务中以保持上传进度，并且工具栏中会给出一个图标。对话框每次都会重新初始化。如何在整个应用程序中保持带有上传进度的对话框状态？

app.component.ts

import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';
import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
import { Router } from '@angular/router';
import { UploadService } from './upload.service';
import './operators';

@Component({
  moduleId: module.id,
  selector: 'sd-app',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  temp:any;
  dialogRef: MdDialogRef<DialogComponent>;
  config: MdDialogConfig = {
    disableClose: true
  };
  constructor(public dialog: MdDialog, private router: Router, public uploadService: UploadService ) {
  this.temp = this.uploadService.getUpload();
  }

  openDialog() {
    this.dialogRef = this.dialog.open(DialogComponent, this.config);
  }


}

app.component.html

 <md-progress-bar mode="determinate"
                       [value]="temp.progress.percent"
                       color="primary"
                       class="progress-bar-margins">
      </md-progress-bar>
      <span>{{temp.progress.percent}}%</span>

对话框组件

export class DialogComponent {
  options: NgUploaderOptions;
  response: any;
  sizeLimit: number = 1024 * 1024 * 50; // 50MB
  previewData: any;
  errorMessage: string;
  inputUploadEvents: EventEmitter<string>;
  temp:any;
  constructor(@Inject(NgZone) private zone: NgZone, public uploadService: UploadService) {

    this.options = new NgUploaderOptions({
        url: 'http://api.ngx-uploader.com/upload',
        filterExtensions: false,
        allowedExtensions: ['dsn'],
        data: { userId: 12 },
        autoUpload: false,
        fieldName: 'file',
        fieldReset: true,
        maxUploads: 2,
        method: 'POST',
        previewUrl: true,
        withCredentials: false
    });

    this.inputUploadEvents = new EventEmitter<string>();
  }
  startUpload(view:any) {
    this.inputUploadEvents.emit('startUpload');
  }
  beforeUpload(uploadingFile: UploadedFile): void {
    if (uploadingFile.size > this.sizeLimit) {
      console.log('File is too large!');
      this.errorMessage = 'File is too large! Please select valid file';
      uploadingFile.setAbort();
    }
  }

  handleUpload(data: any) {
      setTimeout(() => {
        this.zone.run(() => {
          this.response = data;
          this.uploadService.uploadData = data;
          this.temp = this.uploadService.getUpload();
          if (data && data.response) {
            this.response = JSON.parse(data.response);
          }
        });
      });
    }

    handlePreviewData(data: any) {
    this.previewData = data;
  }
  }

上传.component.html

 <button type="button" class="start-upload-button" (click)="startUpload()">Start Upload</button>
</div>
< <div *ngIf="previewData && !response">
  <img [src]="previewData">
</div> 
<div>
 <md-progress-bar mode="determinate"
        [value]="temp.progress.percent"
        color="primary"
        class="progress-bar-margins">
        </md-progress-bar>
        <span>{{temp.progress.percent}}%</span>
</div>

上传.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Rx';

@Injectable()
export class UploadService {
  uploadData :any;
  constructor() {
    console.log('Global Service initialised');
    }
    getUpload() {
        return this.uploadData;
    }
}
4

1 回答 1

2

使用通量架构模式构建 UI 界面：

https://facebook.github.io/flux/（只是阅读它，实际上不要使用 facebook API）。

事实证明，该模式对于跨多个组件维护应用程序状态非常有用——尤其是对于大规模应用程序。

这个想法很简单——在通量架构中，数据总是沿一个方向流动：

在此处输入图像描述

这是真的，即使从 UI 触发了一个操作：

在此处输入图像描述

在您的 Angular2 应用程序中，调度程序是在您的服务上实现的 Observables（任何注入服务的组件都可以订阅它），并且存储是数据的缓存副本以帮助发出事件。

下面是一个实现 Flux 架构的 ToDoService 示例：

import { Injectable } from '@angular/core';
import {Http } from '@angular/http';
import { BehaviorSubject, Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';

export interface ToDo {
    id: number;
    name:string;
    isComplete: boolean;
    date: Date;
}

@Injectable()
export class ToDoService {
    public todoList$:Observable<ToDo[]>;
    private subject: BehaviorSubject<ToDo[]>;
    private store: {
        todos: ToDo[];
    }

    public constructor(private http:Http) { 
        this.subject = new BehaviorSubject<ToDo[]>([]);
        this.todoList$ = this.subject.asObservable();
        this.store = {
            todos: []
        };
    }

    public remove(todo:ToDo) {
        this.http.delete(`http://localhost/todoservice/api/todo/${todo.id}`)
            .subscribe(t=> {
                this.store.todos.forEach((t, i) => {
                    if (t.id === todo.id) { this.store.todos.splice(i, 1); }
                });
                let copy = this.copy(this.store).todos;
                this.subject.next(copy);

            });
    }

    public update(todo:ToDo): Promise<ToDo> {
        let q = this.http.put(`http://localhost/todoservice/api/todo/${todo.id}`, todo)
            .map(t=>t.json()).toPromise();
        q.then(x=> {

                this.store.todos.forEach((t,i) => {
                    if (t.id == x.id) { Object.assign(t, x); }
                    let copy = this.copy(this.store).todos;
                    this.subject.next(copy);
                });
            });
        return q;

    }

    public getAll() {
        this.http.get('http://localhost/todoservice/api/todo/all')
            .map(t=>t.json())
            .subscribe(t=> {
                this.store.todos = t;
                let copy = Object.assign({}, this.store).todos;
                this.subject.next(copy);

            });
    }

    private copy<T>(t:T):T {
        return Object.assign({}, t);
    }

}

关于这项服务有几点需要注意：

  • 该服务存储数据存储的缓存副本{ todos: ToDo[] }
  • 它公开了一个组件可以订阅的 Observable（如果他们感兴趣的话）
  • 它使用一个对其实现私有的 BehaviourSubject。一个 BehaviorSubject 将在订阅时发出一个初始值。如果你想用一个空数组初始化 Observable，这很方便。
  • 每当调用改变数据存储（删除或更新）的方法时，服务都会调用 Web 服务来更新其持久性存储，然后在将更新后的ToDo[]列表发送给所有订阅者之前更新其缓存的数据存储
  • 从服务中发出数据的副本，以防止意外的数据更改以相反的方向传播（这对于维护通量模式很重要）。

DI 注入 Service 的任何组件都有机会订阅todoList$observable。

在以下组件中，我们利用异步管道而不是todoList$直接订阅 observable：

组件.ts

ngOnInit() {
    this.todoList$ = this.todoService.todoList$;
}

组件.html

<li class="list-group-item" *ngFor="let item of todoList$ | async">
     {{ item.name }}
</li>

每当在修改其内部存储的服务上调用方法时，该服务都会更新其所有组件订阅者，而不管哪个组件发起了更改。

Flux 模式是管理复杂 UI 和减少组件之间耦合的优秀模式。取而代之的是Service和Component之间的耦合，交互主要是为了组件订阅服务。

于 2017-02-14T08:35:40.973 回答