angular - Angular Nebular Chat 仅适用于一个模块和组件
问题描述
我只想将 NbChat 集成到我的项目中。起初我只是试图将它正常集成到我的整个项目中,但是当我尝试使用带有打字稿逻辑的组件(在这种情况下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
Vice Versa 我将自己编写的 ChatModule 导入到app.module.ts
.
由于在 nb-layout 中未封装 Nebular Chat Components 时其他人也会发生同样的错误,所以在这里您可以看到 Chat Component 封装如下:
<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)发生冲突。
解决方案
将 NbThemeModule 与 MatMenuModule 一起使用时,我遇到了同样的错误,并通过传递解决了它
...NbThemeModule.forRoot().providers, NbThemeModule
进入聊天组件的提供者,而不是在整个项目中使用它。所以它只在使用组件的页面上有效。
我也把
this.router.events.subscribe((event) => {
document.body.classList.remove('nb-theme-default');
});
进入 app.component 中的 ngOnInit 以禁用全局星云样式并仅在我使用聊天的地方使用此类。
推荐阅读
- python - 无法使用 google CLI 加载数据 - ImportError: cannot import name _common
- swift - 如何优化在图中找到所有最大匹配的算法?
- python - 有没有办法在 Flask 的会话期间跨多个视图/期间保持 LDAP 会话?
- c++ - 迭代所有元素std :: unordered_map与std :: map的性能差异?
- parquet - DESCRIBE 表不返回任何内容
- assembly - MIPS 在函数的参数上使用字符串
- javascript - 字符串类型和文本输出格式
- python - 如何从带有子框架的网站中抓取信息
- spring-boot - 在 IBM Liberty 服务器中安装 ojdbc8 jar 文件
- python - 无法打印一次以完全获取所有数据