0

おそらく、変更検出に関するAngular2の概念が欠けています。

NgZones と ChangeDetectionStrategy について読んだことがありますが、問題を解決できるものはありませんでした。

Observables を保存して一部のコンポーネントでそれらを消費する外部モジュールがある場合、コンポーネントの 1 つがサービスに何かを変更すると、それが他のコンポーネントに伝播します。

問題を表現するのに役立つPlunkerを書きました

http://plnkr.co/edit/ieHnm0ikBe4BR5w6O1XE?p=preview

そこには、を使用して一定のデータ変更をsrc/MyService.tsシミュレートする場所があります。SubjectsetInterval

はSubjectで消費され、src/app.tsその値は空のクリック ハンドラーでボタンをクリックしたときにのみレンダリングされます。

src/MyService.ts

import * as Rx from 'rxjs/Rx';

let global = {};

// The Observable
global.subject = new Rx.Subject();

// Updates value every second
setInterval(() => global.subject.next(Date.now()), 1000);

export var Global = global;

src/app.ts

import {Component} from 'angular2/core'
import {Global} from './myService'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="clickMe()">Click me</button>
      <p>Current time: {{subject | async}}</p>
    </div>
  `,
  directives: []
})
export class App {
  public subject = Global.subject;
  constructor() {
    this.name = 'Angular2'
  }

  public clickMe () {
    console.log("I'm just a click event that do nothing");
  }
}
4

1 に答える 1

0

これがあなたが探しているものかどうかわかりません。

Plunker

import {Component, ChangeDetectorRef} from 'angular2/core'
import {Global} from './myService'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="clickMe()">Click me</button>
      <p>Current time: {{subject | async}}</p>
    </div>
  `,
  directives: []
})

export class App {

  public subject = Global.subject;

  constructor(public ref: ChangeDetectorRef) {
    this.name = 'Angular2';

    setInterval(() => {
                this.ref.detectChanges();
              }, 1000);
  }

  public clickMe () {
    console.log("I'm just a click event that do nothing");
  }
}

また、これを見たいと思うかもしれません。

import {Component} from 'angular2/core'
import {GlobalSR} from './myService'

@Component({
  selector: 'my-app',
  providers: [GlobalSR],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="clickMe()">Click me</button>
      <p>Current time: {{subject | async}}</p>
    </div>
  `,
  directives: []
})

export class App {

  public subject;

  constructor(public globalSR: GlobalSR) {
    this.name = 'Angular2';
    this.subject = globalSR.global.subject;

  }

  public clickMe () {
    console.log("I'm just a click event that do nothing");
  }
}

Plunker

グローバル共有angular2-global-service-providerが好きなら、これが役立つかもしれません

私はあなたが何をしたいのかわかりません。それがあなたの助けになることを願っています。私の英語で申し訳ありません

于 2016-03-14T04:18:43.403 に答える