角2 + SignalR - 从外部脚本访问内部角 [英] Angular 2 + SignalR - Accessing Angular internals from external script

问题描述

我使用SignalR与Angular2应用程序，我们希望SignalR客户端的方法与从服务器接收数据调用到角的应用程序，然后有角重做数据绑定。例如，角应用程序内我露出一个全局变量我们的商店，它有它的集合。

I'm using SignalR with an Angular2 app, where we want the SignalR client methods to call into the Angular app with data received from the server, and then have Angular redo the data-bindings. For example, within the Angular app I expose a global variable for our store, which has a collection on it.

例如。
    （打字稿）

E.g. (TypeScript)

....
export class Store{
  Customers : Customer[];
  constructor(){
    window["GlobalStore"] = this;
  }

  setCustomers (customers : Customer[]){
    this.Customers = customers;
  }
}
....

在我的客户端的JavaScript SignalR我有一个功能：

and in my client SignalR javascript I have a function:

$.connection.MyHub.client.receive = function(data){
  //Call into the Angular app and set data, which is then rendered in views
  //via data-binding
  //data contains a json array of customers
  window.GlobalStore.setCustomers(data);
}

这似乎工作，并设置在商店中的数据，但是当数据被重置角度似乎并没有发现变化，因此用户界面不会刷新。

This seems to work and set the data on the store, however, when the data is reset Angular does not seem to detect changes, and hence the UI is not refreshed.

这不是数据类型的问题，因为即使是传递一个简单的字符串/整数等通过对存储正确设置，当我调试，然而，角框架似乎店内财产并不那么触发变化检测和刷新的意见。

It's not an issue with data-typing, as even passing a simple string/integer etc through to the store correctly sets the store property when I debug, however, the Angular framework doesn't seem to then trigger change detection and refresh the views.

这是如何可以任何想法：
A）手动触发角数据绑定，因此刷新视图？
从外部使用不同的手段角2应用程序内B）调用的方法呢？

Any ideas on how to either: A) Manually trigger the angular databinding so it refreshes the view? B) Call methods within the Angular 2 app from external using a different means?

感谢

推荐答案

要手动运行变化的检测：

To manually run change detection:

1. 使用<一个href=\"https://github.com/angular/angular/blob/2.0.0-alpha.46/modules/angular2/src/core/application_ref.ts#L356\"相对=nofollow> ApplicationRef ::打勾（） 方法。


2. 使用<一个href=\"https://github.com/angular/angular/blob/2.0.0-alpha.46/modules/angular2/src/core/zone/ng_zone.ts#L304\"相对=nofollow> NgZone ::的run（） 方法来包装你code应该角区域内执行。

您可以通过使用依赖注入或使用平台自举你的应用程序让他们（）应用（绑定）.bootstrap（组件）：

You can get them by using dependency injection or by bootstrapping your application using platform().application(bindings).bootstrap(Component):

import { platform } from 'angular2/angular2';

const app = platform().application([] /* - bindings */); // you can use `app.tick()` 
const zone = app.zone; // you can use `zone.run`

app.bootstrap(Component);

这篇关于角2 + SignalR - 从外部脚本访问内部角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！