Ngx-Spinner在特性模块中无法工作。

Question

Ngx-Spinner在主模块内调用时工作正常。 我在完整页面上使用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>

- Sunny Goel

---

请分享一下你目前尝试过的代码。 - Sunil Singh

我认为我们需要看一下你的导入声明。 - nubinub

它仍然需要在HTML文件中的组件中，您激活“show()”或“hide()”。这是这种情况吗？ - rrd

@rrd并不是必须要在调用show和hide的同一组件中出现，我的情况下它能够正常工作。我将<ng-spinner>标签放在了app-root.component.html中，并从其子组件中显示它。 - Sunny Goel

Answer 1

你需要将这个 ngx-spinner 移到单独的组件中。你可以在源组件中使用 Subject/BehaviorSubject 的 next() 操作符来调用此 spinner 组件。

你可以使用 subscribe 方法监听 'ngx-spinner' 组件中的数据以显示/隐藏 spinner。

- Suresh Kumar Ariya

Answer 2

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

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

希望这有所帮助。

- Eastrall

Answer 3

将常用模块与共享模块文件分离是一个好的实践。因此，你的SharedModule应该是 -

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

然后，

• 只需在需要NgxSpinnerModule的地方导入它。

• 您可以根据需要添加许多外部模块。

- Tushar Walzade

Answer 4

尝试这个 在 StackBlitz 上的示例

在你的模块中导入 NgxSpinnerModule

import { NgxSpinnerModule } from "ngx-spinner";


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

- dasunse