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

Question

当我在主模块，也就是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>

但是，当我试图通过从功能模块的组件调用来显示此微调器时，它不工作。

Answer 1

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

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

Answer 2

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

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

希望能有所帮助

Answer 3

使用一个共享的模块文件分离出您常用的模块是一种很好的做法。所以，你的SharedModule应该是-

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

然后,

• 只需在需要您的NgxSpinnerModule的地方导入此文件。
• 您可以根据需要向中添加多个外部模块。