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

Posted 2023-03-13

【中文标题】Angular 2：如何在组件将观察更改的服务中创建一个数组？

【英文标题】：Angular 2: How to create an array in a service that a component will observe changes to?

【发布时间】：2016-09-15 12:49:36

【问题描述】：

我希望我的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();
    );
  

【参考方案1】：

getData() 在每次 Promise 解决时将 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);
        
      
    );
  
  ...

【讨论】：

这样一个简单的解决方案。就我而言，这是一个新手错误，呃......谢谢。

【参考方案2】：

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

这样做，你“打破了这个可观察序列的链条”：你想要在你的组件中有一个可观察的，你（显然）从你的 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$。

【讨论】：

this._LocalStorageService.getNotifications() 返回Promise，而不是Observable 仅供参考。关于此的 2 个问题：1）为什么这比 Mark 下面的答案更好，它有效。 2) 给定你的例子，我如何在我的组件类中subscribe()？