Angular Nebular 样式不适用于 NbChatComponent

Question

我有一个正在进行的 angular 项目，我正在尝试将 Nebular Chat UI 添加到该项目中。

我使用 npm 安装了 nebular 并按照网站中的说明进行了导入。功能按预期工作，但样式未应用于组件。

以下是我遵循的步骤。

1. npm install --save @nebular/theme @angular/cdk @angular/animations
2. npm install --save @nebular/eva-icons

3. 在 app.module.ts 中导入 NbThemeModule 和 NbC​​hatModule

   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

参考：

https://akveo.github.io/nebular/docs/guides/install-nebular#manually https://akveo.github.io/nebular/docs/components/chat-ui/overview#nbchatcomponent

Answer 1

我遇到了同样的问题，我通过将聊天组件包装在<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>