Html 从下到上的Angular 2聊天盒消息

我刚刚使用typescript，我在angular 2项目中工作，我正在尝试制作一个聊天室，新消息应该在底部，旧消息应该排成一行，而不是这样：

另外，我希望他们不要离开div，当div满的时候，我只想用滚动条来查看旧的消息

这就是我所拥有的：

chatroom.component.html：

<h2>Player Notifications</h2>
  <p *ngFor="let m of playersChannel">{{m}}</p>

<h2>Chat history</h2>
<div class='chatbox'>
  <p *ngFor="let m of chatChannel">{{m}}</p>
</div>

chatroom.component.ts：

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

import {WebSocketService } from './websocket.service';

@Component({
    moduleId: module.id,
    selector: 'chat',
    styleUrls: [ 'chatroom.component.css' ],
    templateUrl: 'chatroom.component.html'
})
export class ChatroomComponent implements OnInit {
    playersChannel: string[] = [];
    chatChannel: string[] = [];    

    constructor(private websocketService: WebSocketService){
    }

    ngOnInit() {
        this.websocketService
            .getChatMessages()
            .subscribe((m:any) => this.chatChannel.push(<string>m));
        this.websocketService
            .getPlayersMessages()
            .subscribe((m:any) => this.playersChannel.push(<string>m));
    }

}

---

这应该是一个简单的CSS解决方案。将固定高度设置为

div.chatbox

并添加

overflow-y:auto

。至于要保留在底部的消息，您可以将

位置：相对
添加到
div.chatbox
和
位置：绝对；底部：0到
div.chatbox>p

像这样：

.chatbox {
    height: 400px; /* reasonable estimate */
    overflow-y: auto; /* show scrollbar only when text overflows vertically */
    position: relative;
}

.chatbox > p {
    position: absolute;
    bottom: 0;
}

编辑：若要颠倒顺序，可以创建自定义管道或使用ng管道模块（）中的预构建管道

海关（提供人）：

干杯
 这应该是一个简单的CSS解决方案。将固定高度设置为
div.chatbox
并添加
overflow-y:auto
。至于要保留在底部的消息，您可以将
位置：相对
添加到
div.chatbox
和
位置：绝对；底部：0到
div.chatbox>p

像这样：

.chatbox {
    height: 400px; /* reasonable estimate */
    overflow-y: auto; /* show scrollbar only when text overflows vertically */
    position: relative;
}

.chatbox > p {
    position: absolute;
    bottom: 0;
}

编辑：若要颠倒顺序，可以创建自定义管道或使用ng管道模块（）中的预构建管道

海关（提供人）：

干杯
 只需使用添加的日期、数组索引e.t.c或将push替换为unshift将新消息添加到数组开头，就可以颠倒消息的顺序

有关简单的订购管道，请参见以下内容：

将消息本身与屏幕或容器底部对齐（使用css）

您可以通过简单地使用added date、数组索引e.t.c或将push替换为unshift将新消息添加到数组的开头来反转消息的顺序

有关简单的订购管道，请参见以下内容：

将消息本身与屏幕或容器底部对齐（使用css）

服务如何返回getChatMessages数据？添加了getChatMessagestext-align:bottom的websocket服务不可用，请尝试垂直对齐，选中此@enucar尝试垂直对齐：文本底部和底部，但均无效谢谢。。。有没有办法将它们固定到底部？服务如何返回getChatMessages数据？使用getChatMessagestext-align:bottom添加的websocket服务不可用请改为尝试垂直对齐，选中此@enucar尝试垂直对齐：文本底部和底部，均无效谢谢。。。有什么办法可以把它们钉在底部吗？这很有效，谢谢：）你知道我怎样才能颠倒信息的顺序吗？谢谢。。。有没有办法把它们钉到底？@JoãoSilva pin以什么方式？信息不是从上到下显示，而是从下到上显示。。。这就是我所说的颠倒顺序…这很有效，谢谢：）你知道我如何颠倒消息的顺序吗？谢谢你。。。有没有办法把它们钉到底？@JoãoSilva pin以什么方式？信息不是从上到下显示，而是从下到上显示。。。这就是我说的颠倒顺序…谢谢你。。。还有任何将它们固定到底部的想法吗？可以在css中使用显示表和垂直对齐到底部来完成。这里的内容#父{显示：表格}#子{显示：表格单元格；垂直对齐：底部；}M，我尝试过，但单元格都在同一行中。。。我设法让他们每行一个，但也有一个问题。。。表本身会自动调整大小，因此第一条消息之间会有很大的空间，直到有足够的消息使它看起来像一个像样的这一切都可以用简单的css来修复。请参见此JSFIDLE以获取示例。还应避免使用p标记显示项目列表。我刚刚注意到这个解决方案有一个问题。。。它起作用了，但是溢出的水被弄乱了。。。如果有很多MSG，而不是有一个滚动条，它只会让聊天变得更大谢谢你。。。还有任何将它们固定到底部的想法吗？可以在css中使用显示表和垂直对齐到底部来完成。这里的内容#父{显示：表格}#子{显示：表格单元格；垂直对齐：底部；}M，我尝试过，但单元格都在同一行中。。。我设法让他们每行一个，但也有一个问题。。。表本身会自动调整大小，因此第一条消息之间会有很大的空间，直到有足够的消息使它看起来像一个像样的这一切都可以用简单的css来修复。请参见此JSFIDLE以获取示例。还应避免使用p标记显示项目列表。我刚刚注意到这个解决方案有一个问题。。。它起作用了，但是溢出的水被弄乱了。。。如果有很多MSG，而不是有一个滚动条，那就让聊天变得更大
const io = require('socket.io');

export class WebSocketServer {
    public io: any;




    public init = (server: any) => {
        this.io = io.listen(server);
        this.io.sockets.on('connection', (client: any) => {
            client.emit('players', Date.now() + ': Welcome to battleship');
            client.broadcast.emit('players', Date.now() + ': A new player has arrived');
            client.on('chat', (data) => this.io.emit('chat', data));

        });
    };
   public notifyAll = (channel: string, message: any) => {
        this.io.sockets.emit(channel, message);
    };


};

.chatbox {
    height: 400px; /* reasonable estimate */
    overflow-y: auto; /* show scrollbar only when text overflows vertically */
    position: relative;
}

.chatbox > p {
    position: absolute;
    bottom: 0;
}

@Pipe({
  name: 'reverse'
})
export class ReversePipe {
  transform(value) {
    return value.slice().reverse();
  }
}

.chatbox{
  display:table;
}
.chatbox p{
  display:table-cell;
  vertical-align:bottom;
}