Question

情况如下：我在主要组件（应用程序组件）中有一个用户列表，我想要实现的是单击每个用户将显示一个聊天窗口，其中包含该用户向其发送的消息我单击了，如果我单击两个用户，则应该彼此显示对方的消息框，我也应该能够关闭每个框，这与Facebook聊天的操作相同。我是Angular的新用户，请问有人可以帮助我吗？

app.component.html

<div class="sidenav">
  <ul *ngFor="let persona of personas">
    <li><a id="{{persona.id}}">{{persona.nombre}}</a></li>
  </ul>

</div>

conversacion.component.html

<div class="screen"style="position: fixed;bottom: 10vh;right: 200px">
    <div style="height: 20px;background-color: red">
        Chat
    </div>
    <div class="conversation"#scrollMe [scrollTop]="scrollMe.scrollHeight" *ngIf="messages.length > 0">

        <div class="messages" [ngClass]="{'messages--sent': message.userId == user , 'messages--received': message.userId != user }" *ngFor="let message of messages">
            <div class="message">
                <div class="user">{{ message.userId.username }}<span class="range admin">Dev</span></div>
                <p> {{ message.message }} </p>
                <time>{{ message.time }}</time>
            </div>
        </div>    
    </div>
    <div class="text-bar">
        <div class="text-bar__field" id="form-message">
        <textarea type="text" #msgInput (keydown)="autoResize($event)" (keydown.enter)="sendMessage(msgInput.value);false;msgInput.value='';" placeholder="Say something">
        </textarea>
        </div>

    </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import {ChatService} from "./services/chat.service";
import {Mensaje} from "./models/mensaje";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
    providers:[ChatService]
})
export class AppComponent {
  title = 'chat';
  public id_usuario_destino:number;
  public personas:Array<any>;
  public id_persona:number;
  constructor(private  _chatService:ChatService){
    this.personas=[
        {id:"2",
         nombre:"sergio"
        },
        {id:"3",
            nombre:"jhoyner"
        },
        {id:"4",
            nombre:"gerardo"
        },
        {id:"5",
            nombre:"fabrizio"
        }
    ]
  }

    enviaid(id){
        this.id_usuario_destino=id.id;
      this.id_persona=this.id_usuario_destino;
        this._chatService.getMessages(1,this.id_usuario_destino).subscribe(
            response=>{
                console.log(response)

            },
            error=>{
                console.log(error);
            }
        );
    }
}

我想这样做：

单击后添加具有相同设计和不同内容的动态组件Angular 8

0 个答案: