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类负责连接到SignalR服务器，从该服务器接收消息并将它们转换为Event对象，然后调用subscribeToAllEvents中指定的任何函数（在这种情况下， _onEventReceived）

角度模板html非常简单：

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

这一切都运行正常，但我不喜欢的是必须向组件中注入VmTurnZone对象，并且必须从对{{1}的调用中更新events属性在run上。这对我来说似乎有点过于复杂。但是，如果我不在VmTurnZone方法中执行此操作，则当事件属性更新时，视图不会更新以反映该更改。只有在VmTurnZone.run内才有效。

有没有更简单的方法来做我在这之后的事情？我已经考虑过在监视范围内添加监视，但这看起来似乎没有用（并且在我看来它应该用于相反发生的更改 - 即视图更新范围，当你发生这种情况时，你想做点什么。）

任何AngularDart专家都可以告诉我，如果有更好的方法可以做我之后的事情吗？

Answer 1

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

您可以将您的事件添加到流中然后监听这些事件，并且信号器将看到这些更改，例如：

@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;
    }
}

Answer 2

据我所知，当更改源位于默认Angular区域（例如某些JavaScript库）之外时，Angular可以识别模型更改。

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

2 个答案: