import { Component, ElementRef, OnInit, NgZone, Input, Inject } from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd/message'; import signalR from '../../../../signalRChat' import { HttpClient } from '@angular/common/http'; import { StationWeeklyPlanComponent } from '../../task/station-weekly-plan/station-weekly-plan.component'; @Component({ selector: 'app-chat-window', templateUrl: './chat-window.component.html', styleUrls: ['./chat-window.component.scss'] }) export class ChatWindowComponent implements OnInit { @Input() public taskId: any;//父组件传进来的任务id constructor(private ngZone: NgZone, private element: ElementRef, private message: NzMessageService, @Inject(StationWeeklyPlanComponent) private parentComponent: any, private http: HttpClient) { } chatcontent userId userName ngOnInit(): void { this.userId = JSON.parse(sessionStorage.getItem('userData')).id this.userName = JSON.parse(sessionStorage.getItem('userData')).name this.chatcontent = this.element.nativeElement.querySelector(`#chatcontent`) setTimeout(() => { this.scrollToBottom() }, 0); this.getAllMessages() signalR.initSR(this.taskId); // 接收来自中心的消息 (signalR.SR as any).on('receiveMessage', (message: any) => { console.log('收到消息', message) this.MessagesList.push(message); if (this.chatcontent.scrollHeight - (this.chatcontent.scrollTop + this.chatcontent.clientHeight) == 0) { setTimeout(() => { this.scrollToBottom() }, 0); } }) } /** * 消息列表 */ MessagesList = [] /** * 获得所有消息 */ getAllMessages() { console.log('任务id', this.taskId) this.http.get('/api/TaskChats/Messages', { params: { TaskId: this.taskId, PageNumber:1, PageSize:999, SortProperty:'CreationTime', SortType:'asc' } }).subscribe((data: any) => { this.MessagesList = data.items console.log('聊天记录', this.MessagesList) }) } ngOnDestroy(): void { signalR.stopSR() } text = '' close() { this.parentComponent.closechat() } send() { if (!this.text) { this.message.create('warning', '输入不能为空'); return } // 发送消息 (signalR.SR as any).send('sendMessage', this.taskId, this.text) setTimeout(() => { this.scrollToBottom() this.text = '' }, 0); } scrollToBottom() { this.chatcontent.scrollTop = this.chatcontent.scrollHeight } }