Angular Nebular样式不适用于NbChatComponent。

Question

我有一个正在进行的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

参考文献。

https:/akveo.github.ionebulardocsguidesinstall-nebular#manually。https:/akveo.github.ionebulardocscomponentschat-uioverview#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>

Answer 2

我试着在主程序中手动加载 mixins 和包含 globals CSS。styles.scss 文件，但我收到了同样的结果。我在 codesandbox 上的项目是 此处.@nebular的朋友们帮帮我们吧!