Angular Nebular 样式不适用于 NbChatComponent

Question

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

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

以下是我遵循的步骤。

npm install --save @nebular/theme @angular/cdk @angular/animations

npm install --save @nebular/eva-icons

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

import { NbThemeModule, NbChatModule } from '@nebular/theme';

@NgModule({
imports: [
  ...
  NbThemeModule.forRoot(),
  NbChatModule
]

在 angular.json 中添加样式

"styles": [
      "node_modules/@nebular/theme/styles/prebuilt/default.css"

添加了 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>