Angular2 с Rx.subject не обновляет вид

Возможно, мне не хватает какой-то концепции Angular2 об обнаружении изменений.

Я читал о NgZones и ChangeDetectionStrategy, но ни одна из них не решила мою проблему.

Дело в том, что у меня есть внешний модуль, в котором я храню свои Observables и использую их в некоторых компонентах, когда один из компонентов что-то изменяет в службе, он распространяется на другие компоненты.

Я написал плункер, чтобы помочь выразить свою проблему

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

Там у меня есть src/MyService.ts, где я имитирую Subject с постоянным изменением данных, используя setInterval.

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");
  }
}

angular rxjs angular2-changedetection
person João Mosmann    schedule 14.03.2016    source источник
comment
Почему у вас такая служба? Все, что там происходит, находится вне зоны angular2.   -  person Eric Martinez    schedule 14.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я не знаю, если это то, что вы ищете.

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

Я не знаю, что вы хотите сделать. Я надеюсь, что это поможет вам и извините за мой английский

person Angel Angel    schedule 14.03.2016