如何将来自套接字io的数据附加到angular html [英] how to append data coming from socket io to angular html

问题描述

我有一个套接字程序，正在列出并提供日志数据.套接字正在发送正确的数据，就像在控制台中一样，我正在获取正确的数据.

I have a socket program which is listning and giving the log data. Socket is sending correct data as in console i am getting the correct data.

这是我的代码

export class RoboLogComponent implements OnInit {
dataToShow:any
@ViewChild('dataContainer') dataContainer : ElementRef;

loaddata(data:String) {
    this.dataContainer.nativeElement.innerHtml =data
}
ngOnInit():void{
console.log("I am triggering")
let socket=io('http://localhost:9999')
socket.on('send-log-data',function(data){
    console.log(data) //here it is displaying correct value emitted from socket
    this.dataContainer.nativeElement.innerHtml =data //but is not getting reflected
})
}
}

在html中，我已定义要附加.

In html I have defined it to append.

<div #dataContainer></div>

套接字数据在此处正确显示，但未反映到ui.在控制台中，它是prinitng正确的值.

Here from socket data is coming properly but it is not getting reflected to ui. In console it is prinitng correct value.

实际上，我的用例是我的后端代码连续生成html格式的日志之一，我需要在Web ui中显示日志

Actually my use case is one of my backend code generating log in html format continuously and i need to display the log in web ui

推荐答案

最后，经过大量研究，我终于回答了我的问题.我随附的表情

Finally i got answered for my question after doing lots of research . The soution i came with

export class RoboLogComponent implements OnInit,AfterViewInit,OnDestroy {
 dataToShow:string="lets see if i am coming"
 socket:any

loaddata(data:any) {
    console.log("chcking")
    this.htmlToadd =this.htmlToadd+"<br>"+data
}
ngOnInit():void{
    this._labService.streamLogs().subscribe(data => 
this.socket=io('http://localhost:9999')
}


ngAfterViewInit(){
this.socket.on('send-log-data',function(data){
                this.loaddata(data)                
}.bind(this))
}
 ngOnDestroy(){
this.socket.disconnect()
}

}

在html文件中只需添加

And in html file just add

<div class="abc" [innerHtml]="htmlToadd | sanitizeHtml" *ngIf='htmlToadd'></div>

这里的sanitizeHtml管道仅用于绕过动态加载的html内容的安全检查.

Here sanitizeHtml pipe used just to bypass security check of dynamically loaded html content.

这篇关于如何将来自套接字io的数据附加到angular html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！