Angular Nebular样式不适用于NbChatComponent。

我有一个正在进行的angular项目,我试图将nebular聊天UI添加到项目中。

我用npm安装了nebular,并按照网站中提到的方法进行了导入。功能和预期的一样,但是样式没有应用到组件上。

以下是我的操作步骤。

  1. npm install –save @nebulartheme @angularcdk @angularanimations
  2. npm install –save @nebulareva-icons。
  3. 在app.module.ts中导入了NbThemeModule和NbChatModule。

    import { NbThemeModule, NbChatModule } from '@nebular/theme';
    
    @NgModule({
    imports: [
      ...
      NbThemeModule.forRoot(),
      NbChatModule
    ]
    
  4. 在angular.json中添加了样式

    "styles": [
          "node_modules/@nebular/theme/styles/prebuilt/default.css"
    
  5. 添加了html组件(网站上有样本)。

    <nb-chat title="Nebular Conversational UI">
        <nb-chat-message *ngFor="let msg of messages"
                         [type]="msg.type"
                         [message]="msg.text"
                         [reply]="msg.reply"
                         [sender]="msg.user.name"
                         [date]="msg.date"
                         [files]="msg.files"
                         [quote]="msg.quote"
                         [latitude]="msg.latitude"
                         [longitude]="msg.longitude"
                         [avatar]="msg.user.avatar">
    </nb-chat-message>
    
    <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true">
    </nb-chat-form>
    

輸出1

enter image description here

参考文献。

https:/akveo.github.ionebulardocsguidesinstall-nebular#manually。https:/akveo.github.ionebulardocscomponentschat-uioverview#nbchatcomponent。

解决方案:

我也遇到了同样的问题,我通过将聊天组件封装在 <nb-layout><nb-layout-column>. 我错过了这个问题,因为我只打算使用聊天组件。

   <nb-layout>
    <nb-layout-column>
      <nb-chat title="Chat" size="medium">
        <nb-chat-message
          *ngFor="let msg of messages"
          [type]="msg.type"
          [message]="msg.text"
          [reply]="msg.reply"
          [sender]="msg.user.name"
          [date]="msg.date"
          [files]="msg.files"
          [quote]="msg.quote"
          [latitude]="msg.latitude"
          [longitude]="msg.longitude"
          [avatar]="msg.user.avatar"
        >
        </nb-chat-message>
        <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true"> </nb-chat-form>
      </nb-chat>
    </nb-layout-column>
  </nb-layout>

给TA打赏
共{{data.count}}人
人已打赏
未分类

杰克逊的 "Visibility.Any "表演。

2022-9-9 2:56:23

未分类

通过XPath表达式提取一个以上属性节点值的值

2022-9-9 3:07:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索