Angular 2：如何在服务中创建一个组件将观察变化的数组？

Question

我希望我的 NotificationsBellComponent 接收对服务中数组的更改。假设 _LocalStorageService 正确发回数据。

问）如何让我的组件在服务集合发生更改时接收更改？

目前组件：

@Component({
    selector: 'notifications-bell',
    directives: [],
    templateUrl: 'build/components/notificationsBell/notificationsBell.html',
    styles: [`
        button{
            background: none !important;
            background-color: none !important;
            box-shadow: none !important;
        }
    `]
})
export class NotificationsBellComponent {

    private notifications: string[];

    constructor(
        private _platform: Platform,
        private _nav: NavController,
        private _events: Events,
        private _ConfigService: ConfigurationService,
        private _NotificationService: NotificationService
    ) {
        this.notifications = this._NotificationService.notifications;
    }
}

目前服务：

@Injectable()
export class NotificationService {

  public notifications: string[];

  constructor(
    private _ConfigService: ConfigurationService,
    private _LocalStorageService: LocalStorageService,
    private _I8nService: I8nService,
    private _events: Events
  ) {
    this.getData();
  }

  getData() {
    this._LocalStorageService.getNotifications().then((data) => {
      var list: string[] = [];
      if (data.res.rows.length > 0) {
        for (var i = 0; i < data.res.rows.length; i++) {
          list.push(data.res.rows.item(i).notification);
        }
      }
      this.notifications = list;
    });
  }

  addItem(description: string) {
    this._LocalStorageService.addNotification(description).then(() => {
      this.getData();
    });
  }
}

Answer 1

每次承诺解决时，

getData() 将 notifications 分配给一个新的 list 数组。您的组件仍将引用原始 list 数组。

与其每次都分配一个新数组，不如将其清除并将新数据 push() 添加到其中：

export class NotificationService {
  public notifications: string[];
  getData() {
    this._LocalStorageService.getNotifications().then((data) => {
      this.notifications.length = 0;  // clear array, but keep same reference
      if (data.res.rows.length > 0) {
        for (var i = 0; i < data.res.rows.length; i++) {
          this.notifications.push(data.res.rows.item(i).notification);
        }
      }
    });
  }
  ...
}

Answer 2

通过不在服务中创建数组。

这样做，您就是这个可观察序列的 "breaking the chain"：您想要在您的组件中有一个可观察对象，您（显然）正在从您的 LocalStorageService 中获得一个可观察对象，所以您的目标应该将其建模为一直流过的流，而不是在您的服务中将其分解。

类似于：

@Injectable()
export class NotificationService {

  public notifications$: Observable<string[]>;

   constructor(
     private _ConfigService: ConfigurationService,
     private _LocalStorageService: LocalStorageService,
     private _I8nService: I8nService,
     private _events: Events
   ) {
      this.notifications$ = this._LocalStorageService.getNotifications()
          .map(notifications => {
              // modify the notifications however you need to her
          }) 

   }
}

那么，在你的服务中，你可以subscribe()到service.notifications$。

Angular 2：如何在服务中创建一个组件将观察变化的数组？

Angular 2: How to create an array in a service that a component will observe changes to?

service

observable

typescript

ionic2

angular