Geek Answers Handbook

Using Dart Observables to Detect Angular2 Changes

In my Angular2 application written in Dart, I have several services that track data shared between components that do not necessarily have any special relation in the view. I need updates triggered by any component that will be displayed on each component, I want the performance benefits to OnPushchange, I need components to display the values ​​that could be set before the component was created, and I want all this to run with a minimal template .

My research shows that Observables may be what I need, but I could not find answers to a few questions.

Is there an Observable in Dart implementation that works well with Angular2?

Is an Observable Significantly Different from Dart Street? In particular, does Observable maintain its current value in addition to notifying you of future updates?

And last, but not least, if Observable meets my requirements, then what is the minimum syntax for declaring a component's Observable String property, initializing it to an observable, retrieving from the injected service, displaying its value in the component's template (starting with an existing value), and with automatically updates the component to detect push changes with updates to its value?

If Observable doesn't work for this, how else should I do it? My current idea is to use a custom subclass Streamthat inserts the last value before anything else received by the new listener and sends it through a tag asyncto handle retrieving values ​​from the stream and marking to detect changes.

My ideal solution would look something like this:

@Injectable()
class MyService {
  @observable int health;
}

@Component(
    ...)
class MyComponent {
  @observable int health;
  MyComponent(MyService service) : health = service.health;
}

And in the template:

<span>{{health | async}}</span>

Or for the really perfect one, although it would have to somehow connect to the layout of the Angular template (maybe with a transformer? I still haven't found out how this works):

<span>{{health}}</span>

And only with that will it just work.

The user solution I'm working with now is not so convenient, but it closes.

+4
1

https://pub.dartlang.org/packages/observe. Angular2, Polymer <= 0.16.x, Angular2 OnPush.

List myList = toObservable([]);


myList.changes.listen((record) {
  // invoke Angular change detection
});

Observable ( Observable)

class Monster extends Unit with Observable {
  @observable int health = 100;

  void damage(int amount) {
    print('$this takes $amount damage!');
    health -= amount;
  }

  toString() => 'Monster with $health hit points';
}

Angular

var obj = new Monster();
obj.changes.listen((records) {
  // invoke Angular change detection
});

. , . , .

, -?...

, Dart Observable , a Stream. someObservable.changes Stream, , Observable , @observable .

, Observable ?

. , changes Angular, , Angular .

Observable String ,

int, , String.

+2

More articles:


All Articles