如何在Angular2-Meteor中使注入的服务具有反应性 [英] How to make injected service reactive in Angular2-Meteor

问题描述

我是Angular2的新手，正在尝试获取自定义组件以使用服务来管理Mongo.Collection对象的注册表的服务.我的问题是，加载集合后，我似乎无法让Angular刷新UI.

I am new to Angular2 and am trying to get a custom Component to use a Service which manages a registry of Mongo.Collection objects. My problem is that I cannot seem to get Angular to refresh the UI when the Collection has loaded.

如果您看下面的代码，您会看到有一个注入了DatasetService的Component.该服务管理集合的注册表.我猜想这个问题与以下事实有关:Meteor.autorun()方法使处理脱离了Angular的区域"& ;;我需要以某种方式将流程重新注入到Angular区域/摘要中?

If you take a look at the code below you will see that there is a Component which has a DatasetService injected. This service manages a registry of Collections. I am guessing that the problem is related to the fact that the Meteor.autorun() method takes the processing out of the Angular 'zone' & I need to somehow re-inject the process into the Angular zone/digest?

客户端和客户端服务器:

Both client & server:

export const Meetings = new Mongo.Collection<any>('meetings');

仅服务器

Meteor.publish('meetings', function(options: any) {
  return Meetings.find({});
});

仅客户端

class Dataset {
  cursor: Mongo.Cursor<any>;
  loading: boolean = true;

  constructor( public collection: Mongo.Collection<any> ) {
    Tracker.autorun(() => {
      this.loading = true;
      Meteor.subscribe('meetings', {}, () => {
        this.cursor = this.collection.find({});
        this.loading = false;
      });
    });
  }
}

@Injectable()
class DatasetService {
  datasets: Dataset[] = [];

  register( id: string, collection: Mongo.Collection<any> ) : Dataset {
    return this.datasets[id] = new Dataset( collection, options );
  }
}

@Component({
  selector: 'meetings-list',
  template: `<ul><li *ngFor="let meeting of meetings.cursor">{{meeting.name}}</li></ul>`,
  viewProviders: [DatasetService]
})
class MeetingsListComponent extends MeteorComponent implements OnInit {
  meetings: Dataset;

  constructor(private datasetService: DatasetService) {
    super();
  }

  ngOnInit() {
    this.meetings = this.datasetService.register( 'meetings', Meetings );
  }

  checkState() {
    console.log(this.loading);
  }
}

如果我加载页面，则会议列表不会出现.但是，如果我通过单击按钮手动调用"checkState()"，则会刷新UI&进行会议.

If I load the page the list of meetings does not appear. However, if I manually call 'checkState()' by clicking on a button it then refreshes the UI & renders the meetings.

任何帮助，清晰性或实现我想要做的事情的替代方式，将不胜感激！

Any helps, clarity or an alternative way to achieve what I'm trying to do would be much appreciated!

推荐答案

您是正确的.触发更改的代码是从Angular2区域之外输入的，因此您需要将其推入区域以执行更改.为此，您需要将NgZone注入您的服务.然后，您可能需要将其传递给Dataset实例，因为这是应该触发更新的代码所在的位置.例如，这可能起作用:

You are correct. The code that triggers the change is coming in from outside the Angular2 Zone, so you need to push it into the zone to execute the change. To do that, you need to inject the NgZone into your service. Then you probably need to pass it on to the Dataset instance, since that is where the code that should trigger the update is located. For example, this may work:

import { Injectable, NgZone, Inject } from '@angular/core';

class Dataset {
  cursor: Mongo.Cursor<any>;
  loading: boolean = true;

  constructor( public collection: Mongo.Collection<any>, zone: NgZone ) {
    Tracker.autorun(() => {
      this.loading = true;
      Meteor.subscribe('meetings', {}, () => {
        zone.run(() => {  //<-- new line
          this.cursor = this.collection.find({});
          this.loading = false;
        });               //<-- end of new line
      });
    });
   }
}

@Injectable()
class DatasetService {
  datasets: Dataset[] = [];
  private zone: NgZone;

  // Inject Here
  constructor(@Inject(NgZone)zone: NgZone) { this.zone = zone; }

  register( id: string, collection: Mongo.Collection<any> ) : Dataset {
    //Add zone to Dataset constructor, 
    // not sure before or after options (not sure where options comes from or goes
    return this.datasets[id] = new Dataset( collection, this.zone, options );
  }
}

这篇关于如何在Angular2-Meteor中使注入的服务具有反应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！