Question

我们正在尝试使用聊天列表构建聊天组件。当用户单击左侧的聊天列表项时，应打开与该特定所选用户的消息。对于选定的列表项，我们添加了活动类来更改颜色。这是代码：

HTML

div id="frame">
    <div id="sidepanel">
        <div id="contacts" >
            <ul *ngFor="let chat of chatList">
                <li class="contact">
                    <div class="wrap" (click)="GoToChatPage(chat.receiverId.username)">
                        <span class="contact-status online"></span>
                        <img src="http://res.cloudinary.com/ratingapp/image/upload/v{{chat.receiverId.picVersion}}/{{chat.receiverId.picId}}" alt="" />
                        <div class="meta">
                            <p class="name">{{chat.receiverId.username}}</p>
                            <p class="preview" >
                                     {{chat.msgId.message[chat.msgId.message.length - 1].body.substr(0, 10)}}...</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
  </div>
    <div class="content">
        <div class="contact-profile">
            <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
            <p>Harvey Specter</p>
            <div class="social-media">
                <i class="material-icons">cancel</i>

            </div>
        </div>
        <div class="messages">
            <ul *ngFor="let message of messagesArray">

                <li class="sent" *ngIf="user.username !== receiver && user.username !== message.sendername">
                    <img src="http://res.cloudinary.com/ratingapp/image/upload/v{{chat.receiverId.picVersion}}/{{chat.receiverId.picId}}" alt="" />
                    <p>{{message.body}}</p>
                </li>
                <li class="replies" *ngIf="user.username === message.sendername">
                    <img src="http://res.cloudinary.com/ratingapp/image/upload/v{{chat.receiverId.picVersion}}/{{chat.senderId.picId}}" alt="" />
                    <p>{{message.body}}</p>
                </li>
            </ul>
        </div>
        <form (ngSubmit)="SendMessage()">
        <div class="message-input">
            <div class="wrap">
            <input [(ngModel)]="message" (keypress)="IsTyping()" type="text" placeholder="Write your message..." />
            <button class="emojiBtn" (click)="Toggled()"></button>
            <div class="emoji-content-editable" (emojiPickerCaretEmitter)="HandleCurrentCaret($event)" (input)="content = $event.target.textContent"
            [textContent]="content" contenteditable="true"></div>

          <i class="emoji-toggle-button imgBtn" [(emojiPickerIf)]="toggled" [emojiPickerPreserveSelection]="false" [emojiPickerDirection]="direction"
            [emojiPickerAutofocus]="true" (emojiPickerSelect)="HandleSelection($event)"></i>
            <button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
            </div>
        </div>
        </form>
    </div>
</div>

TypeScript所需的零件

GoToChatPage(name) {
    this.router.navigate(['chat', name]);
    this.msgService.MarkMessages(this.user.username, name).subscribe(data => {
      this.socket.emit('refresh', {});
    });
  }

我认为我应该实现

`chatSelected = new EventEmitter<>();

但是不确定如何创建这样的函数并在组件的类型脚本中实现。因此，当用户单击聊天列表项时，它将变为活动状态，并在右侧显示与所选用户的消息。

如何在Angular的此聊天列表组件中实现所选功能？

0 个答案: