Ngx-Spinner 在功能模块中不起作用答案

【问题标题】：Ngx-Spinner is not working in feature moduleNgx-Spinner 在功能模块中不起作用
【发布时间】：2019-10-28 13:47:12
【问题描述】：

Ngx-Spinner 当我在主模块中调用它时，它工作正常，即app-module。

我在完整页面上使用line spinner，所以我在app-component.html 中定义它

<ngx-spinner bdColor="rgba(51, 51, 51, 0.47)" size="medium" color="#fff" type="line-spin-clockwise-fade"></ngx-spinner>

但如果我试图通过从功能模块的组件调用来显示这个微调器，它就不起作用了。

【问题讨论】：

分享你迄今为止尝试过的代码。
我认为我们需要查看您的进口声明。
它仍然需要在您激活“show()”或“hide()”的组件的 html 文件中。是这样吗？
@rrd 不是强制性的，它应该出现在我们调用 show 和 hide 的同一组件中，在我放置的情况下它工作正常app-root.component.html 中的 <ng-spinner> 标记并从其子组件中显示它。

标签： angular spinner

【解决方案1】：

您需要将此 ngx-spinner 移动到单独的组件中。您可以使用源组件中的 next() 运算符使用 Subject/BehaviorSubject 调用此微调器组件。

您可以使用 subscribe 方法监听“ngx-spinner”组件中的数据以显示/隐藏微调器。

【讨论】：

【解决方案2】：

在使用功能模块和延迟加载时，您还需要将NgxSpinnerModule 导入到您的功能模块中。

@NgModule({
    imports: [
        CommonModule,
        NgxSpinnerModule,
        ...
    ],
})
export class FeatureModule { ... }

希望对你有帮助

【讨论】：

【解决方案3】：

将常用模块与共享模块文件分开是一种很好的做法。因此，您的 SharedModule 将是 -

@NgModule({
    imports: [
        CommonModule,
        NgxSpinnerModule,
    ],
    exports: [    // optional in your case
        NgxSpinnerModule
    ],
    providers: [
        // ...
    ]
})
export class SharedModule { }

那么，

只要在需要NgxSpinnerModule 的地方导入即可。
您可以根据需要添加许多外部模块。

【讨论】：

【解决方案4】：

试试这个example in stackblitz

在你的模块中导入 NgxSpinnerModule

import { NgxSpinnerModule } from "ngx-spinner";


@NgModule({
  imports: [
    CommonModule, NgxSpinnerModule
  ]
})
export class UserModule { }

【讨论】：