Nebular Toastr > 无法读取 null 的属性“appendChild”答案

【问题标题】：Nebular Toastr > Cannot read property 'appendChild' of nullNebular Toastr > 无法读取 null 的属性“appendChild”
【发布时间】：2020-07-11 11:45:11
【问题描述】：

导航到特定组件后，我想用 Nebular toastrService 显示祝酒词。我正在使用 BehaviourSubject 来检查是否应该显示 toast。

this.messageService.currentMessage.subscribe(msg => {
    if (msg.showToast){showToast()}
}

该代码适用于其他组件，但对于此组件，nebular 在创建 cdk-overlay-container 时会抛出消息“无法读取属性 'appendChild' of null”。

提前感谢您的帮助！

Error Message nebular error

【问题讨论】：

不要在 Angular 中使用直接的 DOM 操作。请改用Renderer2。 Sample
我无法在星云库中更改它
他不是在操纵 Dom，而是图书馆。

标签： javascript angular typescript toastr nebular

【解决方案1】：

在 app.component.html 中用 nb-layout 标签包裹路由器出口，如下所示

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

【讨论】：

【解决方案2】：

很遗憾，这种解决方法是必要的，我最近在我的应用程序中遇到了同样的问题。即使整个应用程序包含在布局/列组件中，它仍然会因相同的错误而崩溃。

当我将相同的布局/列组件包装在多个“页面”组件周围时，最终解决方案出现了，这些组件是导致问题的延迟加载模块的一部分。

因此，如果您一直遇到此问题，请尝试将顶级有问题的组件包装在布局/列中。

【讨论】：