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

思路：采用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:"虞姬",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:"",picture:"https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3293144012,2335984271&fm=26&gp=0.jpg"},{sender:"虞姬",receiver:"欧阳娜娜",headImg:"https://static.easyicon.net/preview/119/1193418.gif",content:"22岁那年，萌生",picture:""}];username:string="虞姬";//username被赋值为自己的用户名，这里假定为虞姬，在实际上应用cooeie来赋值更合理
 

HTML部分：

 
{{message.content}}
       
  
 

关键讲解：

1. [ngClass]="{rightDetailMessage: username===message.sender}"，这是决定信息左右分离的关键，当username严格上等于message.sender时，采用rightDetailMessage样式，为什么是严格上等于message.sender而不是其它东西,因为message.sender在发送信息是被赋值为username的。两者相等说明自己发送的信息，靠右显示。
2. 默认使用leftDetailMessage样式，默认样式就是头像、聊天内容由左向右排列，这就是我们在接收到好友发送信息过来时显示时使用的样式。
3. 在message_content和message_picture所在的标签添加了*ngIf，当内容或图片不为空时生成该标签并显示相应内容。

CSS部分：

.chatView{width:100%;height:60%;background-color:rgb(238, 235, 235);overflow: auto;
 }
 .leftDetailMessage{display: flex;//默认从左到右排列元素width:100%;padding:10px;
 }
 .rightDetailMessage{display: flex;flex-direction: row-reverse;//改变由由右向左排列，头像位于最右边
 }
 .message_heading img{height:30px;width:30px;
 }
 .message_content{max-width:50%;background-color: rgb(46, 245, 46);margin:0px 10px;padding:10px 10px;border-radius: 5%;
 }
 .message_picture img{margin:0px 20px;border-radius: 10%;width:100px;height: 150px;
 }
 

小结： 实现该效果归根结底就是根据条件判断是发送方消息，还是接收方消息，来采取不同的样式实现左右呈现效果。