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

思路：采用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部分：

 <div class="chatView" id="chatView">
             <div class="leftDetailMessage" *ngFor="let message of userMessage" [ngClass]="{rightDetailMessage: username===message.sender}">
                  <div class="message_heading"><img src={{message.headImg}}></div>
                  <div class="message_content" *ngIf="message.content">{{message.content}}</div>
                  <div class="message_picture" *ngIf="message.picture"><img src={{message.picture}}></div>       
             </div>
 </div>  

关键讲解：

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

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