Question

我尝试使用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策略。

谢谢。

Answer 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的上下文中初始化套接字。

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

1 个答案: