Wie aktualisiert man DOM, wenn man Socket-Nachrichten in angular2 empfängt?

Question

Ich versuche, Chat-Anwendung mit angular2 + socket.io zu implementieren, ich bin in der Lage, Nachricht vom Server zurück zu bekommen, aber sobald ich Nachricht zurück, wie man DOM aktualisieren. Ich habe this.messages.push(message) getan, aber dies hat keine Auswirkungen.

Das, was ich

Home.ts

tun

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

} 

Dies ist meine ausdrückliche Route

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> 

So implementieren Sie ChangeDetectorRef oder Erkennungsstrategie in angular2.

Vielen Dank.

Answer 1

Ich denke, dass das Problem ist, dass Sie Ihren Socket außerhalb Angular2 (eine Komponente oder ein Dienst) initialisieren, so dass der Code, der Ereignisse aus dem Socket empfängt, außerhalb einer Angular2-Zone ausgeführt wird. Daher kann das Framework keine Änderungen erkennen.

Entweder Sie ausdrücklich diesen Code in einer Zone laufen NgZone mit:

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

    (...) 
    } 
} 

Entweder Sie initialisieren die Buchse im Zusammenhang mit Angular2.