Question

可能是非常简单的问题。我使用了一个聊天框（推动聊天工具），现在我想对其进行一些调整。您能否建议我一种解决方案，以使连续的消息交替出现在屏幕的两侧？（右第一条消息，左第二条消息，第三条右消息等）

我是Angular和JS的新手，所以我实际上没有意识到要实现此目标需要进行哪些修改。我确实进行了搜索，但目前互联网上的聊天框代码对我来说还是莫名其妙。

聊天框html

<div class="App">
    <main class="chat-window">

        <header class="chat-header">
            <h1>Chat</h1>
            <span class="participants"></span>
        </header>

        <section class="chat-session">
            <ul class="message-list">
                <li class="user-message" *ngFor="let message of messages">
                <span>{{ message.text }}</span>
                </li>
            </ul>
        </section>

        <footer class="chat-footer">
            <form (ngSubmit)='sendMessage()'>
                <input placeholder="Type a message. Hit Enter to send" type="text" name="message" [(ngModel)]="message">
            </form>
        </footer>

    </main>
</div>

聊天框CSS

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

.App {
  width: 100%;
  max-width: 100%;
  height: 500px;
  margin: 0 auto;
  display: flex;
  border: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
  margin-top: 30px;
  justify-content: center;
}

ul {
  list-style: none;
}

.sidebar {
  flex-basis: 30%;
  background-color: #300d4f;
  color: #fff;
  padding: 5px 10px;
}

.sidebar section {
  margin-bottom: 20px;
}

.sidebar h2 {
  margin-bottom: 10px;
}

.user-list li {
  margin-bottom: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.presence {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  margin-right: 10px;
  border-radius: 50%;
}

.presence.online {
  background-color: green;
}

.chat-window {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chat-window > * {
  padding: 10px 20px;
}

.chat-header, .chat-footer {
  display: flex;
  align-items: center;
}

.chat-header {
  border-bottom: 1px solid #ccc;
}

.chat-session {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}

.message-list {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.user-message {
  margin-top: 10px;
}

.user-message span {
  display: block;
}

.user-id {
  font-weight: bold;
  margin-bottom: 3px;
}

.chat-footer {
  border-top: 1px solid #ccc;
}

.chat-footer form, .chat-footer input {
  width: 100%;
}

聊天框ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chat-boxes',
  templateUrl: './chat-boxes.component.html',
  styleUrls: ['./chat-boxes.component.css']
})
export class ChatBoxesComponent implements OnInit {

  message : string;  
  messages = [];

  constructor() { }

  sendMessage(){
    this.messages.push({
      text: this.message,
    })
    this.message = "";
  }

  ngOnInit() {
  }

}

Answer 1

 1. I suggest you to initialise your messages array like this <br/> 
 ``messages: Array<any> = [
    {id: 1, text: 'Chat start...', origin: 'me'},
    {id: 2, text: 'Reply text..', origin: 'other'}
    .......
    ];`
<br/> 
NB: Just an example <br/> 

 2. In your html loop <br/> 
``
<section class="chat-session">
      <ul class="message-list">
             <li class="user-message" [ngClass]="{'left-message': message.origin != 'me', 'right-message': message.from == 'me'"} *ngFor="let message of messages">
                <span>{{ message.text }}</span>
                </li>
          </ul>
     </section>``
<br/>

 3. in your css
``
.right-message{
    text-align: right;
} ``
<br/>
``.left-message{
    text-align: left;
} ``

 4. in your sendMessage function

 ``sendMessage(){
        this.messages.push({
           id: this.messages.length+1
           text: this.message,
           origin: 'me'
        })
        this.message = "";
    }``

Hope it will help.

角度-如何在聊天框的另一侧对齐连续消息？

1 个答案: