Express 在angular2中接收套接字消息时如何更新DOM？

我正在尝试用angular2+socket.io实现聊天应用程序，我能够从服务器上得到消息，但一旦得到消息，我就知道如何更新DOM。我像

this.messages.push（message）

那样做过，但没有效果

这就是我正在做的

Home.ts

import {Component} from 'angular2/core';
import * as io from 'socket.io-client';
import * as _ from 'lodash';

const socket = io.connect();

const template: string = require("./home.html");
const style: string = require("./home.scss");

@Component({
  selector: 'home',
  template: template,
  styles: [style]
})
export class Home {

  private _user: any;
  private messages: any;
  private draftMessage: any;

  constructor() {
    this.messages = {};

    socket.on("on:send-message", (data) => {
      this.messages.push(data);
      console.log("message :", data);
    });

    socket.on("on:joined-room", (data) => {
      console.log("joined");
    });
  }

  get user() : any {
    return this._user;
  }

  onEnter(event: any): void {
    event.preventDefault();
    socket.emit("on:send-message", this.draftMessage);
  }

}

这是我的特快路线

 socket.on("on:send-message", (data) => {
    socket.emit("on:send-message", data);
 });

Home.html

<div class="panel-body msg-container-base">
     <ol class="chat">
         <li class="self" *ngFor="let row of messages">
             <div class="avatar"><img src="/avatar.png"/></div>
              <div class="msg">
                 <p>{{row}}</p>
                 <time>20:18</time>
              </div>
         </li>
     </ol>
</div>

{{row}}

20:18

如何在angular2中实现ChangeDetectorRef或检测策略

---

谢谢。

我认为问题在于您在Angular2（组件或服务）之外初始化套接字，因此从套接字接收事件的代码在Angular2区域之外执行。因此，框架无法检测到更改

您可以使用

NgZone

在区域中显式运行此代码：

@Component({
  selector: 'home',
  template: template,
  styles: [style]
})
export class Home {
  private _user: any;
  private messages: any;
  private draftMessage: any;

  constructor(private ngZone:NgZone) {
    this.messages = {};

    socket.on("on:send-message", (data) => {
      this.ngZone.run(() => {
        this.messages.push(data);
        console.log("message :", data);
      });
    });

    (...)
  }
}

---

要么在Angular2的上下文中初始化套接字。

我认为问题在于在Angular2（组件或服务）之外初始化套接字，因此从套接字接收事件的代码在Angular2区域之外执行。因此，框架无法检测到更改

您可以使用

NgZone

在区域中显式运行此代码：

@Component({
  selector: 'home',
  template: template,
  styles: [style]
})
export class Home {
  private _user: any;
  private messages: any;
  private draftMessage: any;

  constructor(private ngZone:NgZone) {
    this.messages = {};

    socket.on("on:send-message", (data) => {
      this.ngZone.run(() => {
        this.messages.push(data);
        console.log("message :", data);
      });
    });

    (...)
  }
}

---

要么在Angular2的上下文中初始化套接字。

如何在组件模板中显示数据？我提到了如何呈现@Thierry消息列表如何在组件模板中显示数据？我提到了如何呈现@Thierry消息列表