typescript - Angular Nebular 聊天仅适用于一个模块和组件

我只想将 NbChat 集成到我的项目中。最初，我只是尝试在整个项目中正常集成它，但当我尝试在带有 TypeScript 逻辑的组件中使用它（在这种情况下是登录）时，就会出现如下错误；当 NbThemeModule.forRoot({ name: 'corporate' }) 被声明为 app.module 的导入，并且 app.component.html 被 NbLayout 包裹时：

ERROR Error: Uncaught (in promise): TypeError: this.container is undefined
_createContainer@http://localhost:4200/vendor.js:80244:9
getContainerElement@http://localhost:4200/vendor.js:178191:18
_createHostElement@http://localhost:4200/vendor.js:180093:32
create@http://localhost:4200/vendor.js:180060:27
_createOverlay@http://localhost:4200/vendor.js:112117:30
_attach@http://localhost:4200/vendor.js:112026:33
openFromComponent@http://localhost:4200/vendor.js:111963:21
open@http://localhost:4200/vendor.js:111991:21
login/<@http://localhost:4200/main.js:7096:68
__awaiter/<@http://localhost:4200/vendor.js:167019:71
ZoneAwarePromise@http://localhost:4200/polyfills.js:1317:33
__awaiter@http://localhost:4200/vendor.js:167015:12
login@http://localhost:4200/main.js:7084:75.....

由于这会破坏应用程序中的所有内容，我想将整个聊天放置在由子模块导出的组件中，该子模块导出它并导入

NbThemeModule.forRoot({ name: 'corporate' }),
NbLayoutModule,
NbEvaIconsModule,
NbChatModule

反之，我在 app.module.ts 中导入自写的 ChatModule。

由于当 Nebular 聊天组件没有包裹在 nb-layout 中时，其他人也会出现相同的错误，所以在这里你可以看到聊天组件被包裹如下：

<nb-layout>
   <nb-layout-column>
    <nb-chat title="Drag & Drop 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"
                         [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>
   

不知为什么我仍然收到相同的错误。感谢提供帮助。

更新1：

在使用 Chrome 调试时，我获得了更具体的错误代码：

core.js:4197 ERROR TypeError: Cannot read property 'appendChild' of undefined
at NbOverlayContainerAdapter._createContainer (index.js:2116)
at NbOverlayContainerAdapter.getContainerElement (overlay.js:735)
at Overlay._createHostElement (overlay.js:2637)
at Overlay.create (overlay.js:2604)
at MatDialog._createOverlay (dialog.js:673)
at MatDialog.open (dialog.js:632)
at ActivejobsComponent.openJobCreation (activejobs.component.ts:72)
at ActivejobsComponent_div_1_Template_button_click_5_listener (activejobs.component.html:9)
at executeListenerWithErrorHandling (core.js:14309)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:14344)

通过更多的测试，似乎只是将 NbTheme 导入到任何子模块中，就会与 Angular Material 的所有覆盖组件（MatDialog、MatMenu、MatSnackbar、MatSideNav）产生冲突。

答案＃1

我在将 NbThemeModule 与 MatMenuModule 一起使用时遇到了相同的错误，并通过传递解决了它

...NbThemeModule.forRoot().providers, NbThemeModule

把它用在聊天组件的提供者上，而不是在整个项目中使用。所以它只在使用该组件的页面上有效。

我也放

this.router.events.subscribe((event) => {
    document.body.classList.remove('nb-theme-default');
});

在 app.component 的 ngOnInit 中禁用全局 Nebular 样式，并仅在我使用聊天的地方使用此类。

答案＃2

@Marc

感谢 @0vC4

我已经创建了一个解决方案：

https://github.com/akveo/nebular/issues/1663#issuecomment-1184924290

1. 在 app.module.ts 的导入中添加这一行

imports: [  
    NbThemeModule.forRoot({ name: 'default' }),
]

2.app.component.html ;

<nb-layout>
    <nb-layout-column>
        <main>
            <router-outlet></router-outlet>
        </main>
    </nb-layout-column>
</nb-layout>

3. 确保以下代码是 styles.scss 的一部分；

@use 'themes' as *;
@use '@nebular/theme/styles/globals' as *;
@include nb-install() {
  @include nb-theme-global();
};

4. themes.scss ;

@forward '@nebular/theme/styles/theming';
@use '@nebular/theme/styles/theming' as *;
@use '@nebular/theme/styles/themes/default';

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-primary-100: #f2f6ff,
  // color-primary-200: #d9e4ff,
), default, default);

5. 在 app.component.ts 中的 ngOnInit() 添加这段代码

  ngOnInit(): void {
      this.router.events.subscribe((event) => {
          document.body.classList.remove('nb-theme-default');
      });
  }

• 这将从所有应用中移除星云主题。

6. 在你想应用主题的组件中，在 ngOnInit() 中添加此内容

  ngOnInit(): void {
    document.body.classList.add('nb-theme-default');
  }

• 这将为当前组件添加星云主题。