Question

它向您发送了在我的Jhipster 4.8.2应用程序中安装spinnner ngx-loaded的步骤，它没有给出错误，它似乎没问题，但它没有绘制微调器：

安装：

npm install --save ngx-loading

在app.module.ts中：

import { LoadingModule } from 'ngx-loading';
....
imports: [
    BrowserModule,
    LayoutRoutingModule,
    Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-' }),
    Crm482SharedModule,
    Crm482HomeModule,
    Crm482HomeRRHHModule,
    Crm482PrlModule,
    Crm482MainModule,
    Crm482AdminModule,
    Crm482AccountModule,
    Crm482EntityModule,
    SimpleNotificationsModule.forRoot(),
    LoadingModule
    // jhipster-needle-angular-add-module JHipster will add new module here
],

main.component.html：

<simple-notifications [options]="optionsNotifications"></simple-notifications>
<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
<jhi-page-ribbon></jhi-page-ribbon>
<div>
  <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
<!--I tried to put it here and it's not going-->
<div class="card jh-card">
    <router-outlet></router-outlet>
    <router-outlet name="popup"></router-outlet>
</div>
<jhi-footer></jhi-footer>
</div>

我的控制器：

export class MyControllerComponent implements OnInit, OnDestroy {

public loading = false;
......
ngOnInit() {
  this.loading = true;
  ....

Answer 1

在main.component.ts（没有我的组件）中：

public loading = false;

 ....

public loader(loading:boolean) {
 this.loading = loading;
}

在my.component.ts中：

import {JhiMainComponent} from '../../../layouts/main/main.component';
....
this.jhiMainComponent.loader(true); // start
this.jhiMainComponent.loader(false); // finish

Answer 2

我刚读完documentation并意识到你需要放置

<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>

在您的模板组件中，而不是在主应用模板中。这意味着你需要为每个组件模板编写这个以及每个组件中的布尔变量。（如果你问我，这很乏味）

我还推荐this package，因为您只需要在应用组件中设置一次，它就可以用于所有使用HttpClientModule的请求。

Answer 3

非常好的ngx-loading ...

安装：

npm i ngx-loading

app.module ：

中的

import { LoadingModule, ANIMATION_TYPES } from 'ngx-loading';
imports:[
...
    LoadingModule.forRoot({
      animationType: ANIMATION_TYPES.wanderingCubes,
      backdropBackgroundColour: 'rgba(0,0,0,1)', 
      backdropBorderRadius: '4px',
      primaryColour: '#ffffff', 
      secondaryColour: '#ffffff', 
      tertiaryColour: '#ffffff'
  }),
...
]

在app.component.ts或您的component.ts // REQUIRE

loading: boolean = true;

在 app.component.htm l或您的html组件

中

＆＃13;

    <div class="my-container">
        <ngx-loading [show]="loading" [config]="{ 
                backdropBorderRadius: '14px', 
                backdropBackgroundColour: 'rgba(0,0,0,0.87)',
                fullScreenBackdrop: 'true',
                backdropBorderRadius: '10px',
                primaryColour: '#e2f000', 
                secondaryColour: '#e2f000', 
                tertiaryColour: '#e2f000'
             }">
        </ngx-loading>
    </div>

＆＃13;

Answer 4

可能会晚一点，但是我遇到了同样的问题。您需要在app.module.ts的导出数组中添加LoadingModule：

@NgModule({
 imports: [

// loading spinner global settings
LoadingModule.forRoot({
  animationType: ngxLoadingAnimationTypes.chasingDots,
  backdropBackgroundColour: 'rgba(0,0,0,0.4)',
  backdropBorderRadius: '4px',
  primaryColour: '#ffffff',
  secondaryColour: '#ffffff',
  tertiaryColour: '#ffffff',
  fullScreenBackdrop: true
 })
 ],
  declarations: [],
 entryComponents: [],
 exports: [ LoadingModule ]

ngx-loading，Angular 4. Jhipster 4.8.2。不显示微调器

4 个答案: