通过 SignalR 加载数据时在 AngularDart 中重新绑定页面

Question

我有一个正在运行的 AngularDart 应用程序，但我觉得我做错了...

应用程序显示收到的事件列表。事件通过 SignalR 到达应用程序，但我认为这并不真正相关 - 问题是我必须更新组件状态才能看到状态变化显示在页面上的方式。

这是我的组件的简化版本：

@Component( selector: 'liveEvents', templateUrl: 'live_events.html', useShadowDom: false )
class LiveEvents implements ScopeAware {
    VmTurnZone _vmTurnZone;
    EventReceiver _eventReceiver;
    LiveEvents( this._vmTurnZone, this._eventReceiver );
    List<Event> events = new List<Event>();
    void _onEventReceived(Event event) {
        //TODO: This just does not seem right...
        _vmTurnZone.run(() => events.add(event));
    }

    void set scope(Scope scope) {
        var _events = _eventReceiver.subscribeToAllEvents( "localhost", _onEventReceived );
    }
}

EventReceiver class 负责连接到 SignalR 服务器，从该服务器接收消息并将它们转换为事件对象，然后调用 [=13= 中指定的任何函数]（在本例中，_onEventReceived）

angular模板html非常简单：

<ul>
    <li ng-repeat="event in events">Event: {{event.Id}}</li>
</ul>

一切正常，但我不喜欢的一点是必须将 VmTurnZone 对象注入组件，并且必须从调用中更新事件属性 run VmTurnZone。这对我来说似乎有点过于复杂。但是如果我不在 VmTurnZone.run 方法中这样做，当事件属性更新时，视图不会更新以反映该更改。只有在 VmTurnZone.run 内部才有效。

有没有更简单的方法来完成我在这里的任务？我已经考虑过向范围添加一个手表，但这似乎没有用（在我看来它应该用于以相反方式发生的更改 - 即视图更新范围，而你想要发生这种情况时做点什么）。

任何 AngularDart 专家都可以让我知道是否有更好的方法来完成我所追求的事情？

Answer 1

据我所知，当更改源不在默认 Angular 区域（例如某些 JavaScript 库）以供 Angular 识别模型时，这是必要的变化。

Answer 2

https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:async.Stream

您可以将您的事件添加到流中，然后监听这些事件，signalr 将看到这些变化，例如：

@Component( selector: 'liveEvents', templateUrl: 'live_events.html', useShadowDom: false )
class LiveEvents implements ScopeAware {
    EventReceiver _eventReceiver;
    LiveEvents( this._eventReceiver );
    List<Event> events = new List<Event>();

    void set scope(Scope scope) {
        subscribe().listen((event){
            events.add(event);
        });
    }

    Stream<Event> subscribe(){
        var streamController = new StreamController<Event>();

        _eventReceiver.subscribeToAllEvents( "localhost", (event){
            streamController.add(event);
        });

        return streamController.stream;
    }
}

通过 SignalR 加载数据时在 AngularDart 中重新绑定页面

Rebinding a page in AngularDart when the data is loaded via SignalR

dart

angular-dart