聊天室小项目中的聊天框是如何做到接收信息|发送信息在界面上左右分离的

最新推荐文章于 2024-07-14 12:56:12 发布

原创

最新推荐文章于 2024-07-14 12:56:12 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5 #angular

本文介绍如何在Angular聊天室小项目中利用CSS3的display:flex布局，结合ngClass指令，根据消息发送者和接收者的判断，实现聊天信息在界面上的左右分离效果。关键代码包括HTML的ngClass条件样式绑定和CSS样式设计。

思路：采用display:flex布局，我们默认消息是靠左显示的，当满足某条件时(判断是你发送的消息还是接收的消息，若是自己发送的消息，则靠右显示)，此时设置flex-direction: row-reverse即可;

先上效果图

效果图还满意的话接着看代码吧

ts:先看这个好理解下面html模板中绑定的内容

class userMessages{
   
   
  sender:string;//发送方，用sender与本地cookie中的username比较，决定信息显示在左边还是右边
  receiver:string;//接收方
  headImg:string;//头像
  content:string;//发送的文本信息
  picture:string;//发送的图片
}

模拟的数据：
userMessage:userMessages[]=[{
   
   sender:"欧阳娜娜",receiver:"虞姬",headImg:"https://static.easyicon.net/preview/119/1193418.gif",content:"22岁那年，萌生了靠英语改变人生的念头以后，贾晨飞辞掉了服务员的工作，变卖了自己的全部身家，拿着3万块钱，开始全身心地投入到英语学习中。",picture:""},{
   
   sender:"虞姬",receiver:"欧阳娜娜",headImg:"https://static.easyicon.net/preview/119/1193418.gif",content:"22岁那年，萌生了靠英语改变人生的念头以后，贾晨飞辞掉了服务员的工作，变卖了自己的全部身家，拿着3万块钱，开始全身心地投入到英语学习中。",picture:""},{
   
   sender:"虞姬"