账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    angular2聊天框怎么写啊，那位能给指导指导。新手上路，希望能给出ts代码，非常感谢。
    46
    0

    这是HTML代码：
    <div class="small-chat">

        <div class="heading bg-dark text-white">
      <span class="ml-2">聊天框</span>
      <small class="chat-date float-right mr-2">
        <span>2018.06.19</span>
      </small>
    </div>
    <div class="chat-content my-1"style="height: 25rem;  overflow:auto;overflow-x:hidden;">
      <div class="user-group">
        <div class="user-message">
          <span class="user-reply">你好</span>
          <i class="triangle-user"></i>
        </div>
        <img class="user-img" src="/assets/images/g.png"/>
      </div>
      <div class="admin-group">
        <img class="admin-img" src="assets/images/timg.jpg"/>
        <div class="admin-message">
          <i class="triangle-admin"></i>
          <span class="admin-reply">谢谢，你好！</span>
        </div>
      </div>
    </div>
    <div class="input-group input-group-sm" style="height: 2.5rem">
      <textarea class="form-control"></textarea>
      <div class="input-group-prepend">
         <span class="input-group-btn">
            <button class="btn btn-green btn-sm"
                    (click)="send(msg.value);msg.value=''">
              发送
            </button>
         </span>
       </div>
    </div>
  </div>### 问题描述

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）

    你期待的结果是什么？实际看到的错误信息又是什么？

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 长得乖ぃ该我歪 普通会员 1楼

      在Angular 2中，聊天框主要使用了Angular的内置组件Angular material。以下是一个基本的示例：

      ```typescript import { Component, OnInit } from '@angular/core'; import { ChatInput } from '@angular/material';

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

      ngOnInit(): void { }

      sendMessage(message: string): void { // 在这里发送消息 console.log(message); } } ```

      在这个例子中，我们创建了一个名为ChatComponent的组件，它有一个输入框ChatInput。当用户在输入框中输入消息时，sendMessage方法会被调用。

      ChatInput是一个Material Design的自定义组件，它有输入框和一个按钮。当用户点击按钮时，消息将会被发送到服务器。

      ```typescript import { Component, OnInit } from '@angular/core'; import { ChatInput } from '@angular/material';

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

      ngOnInit(): void { }

      sendMessage(message: string): void { // 在这里发送消息 console.log(message); } } ```

      请注意，你需要在服务器上实现消息的发送功能。这通常涉及到创建一个HTTP服务器，并使用Angular Material的HttpClient模块来发送请求。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部