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

【问题标题】：How to update DOM when receive socket message in angular2?在angular2中接收套接字消息时如何更新DOM？
【发布时间】：2016-05-17 07:15:41
【问题描述】：

我正在尝试使用 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>

angular2中如何实现ChangeDetectorRef或Detection策略。

谢谢。

【问题讨论】：

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

标签： express socket.io angular

【解决方案1】：

我认为问题在于您在 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 的上下文中初始化套接字。

【讨论】：