Comments (4)
hi @Albejr ,
I try to reproduce issue with the following code:
this.service.showGroup('zone1')
this.service.showGroup('zone2')
setTimeout(() => {
this.service.hideGroup('zone1')
}, 1000)
setTimeout(() => {
this.service.hideGroup('zone2')
}, 3000)
but everything works fine.
what do you mean about "the second '2' is not displayed" ? There are maybe two scenarios about it:
- first one is the the response of the api
'/api/pet'
return particularly fast, so the spinner comp was detached immediately when it was attached to mask container dom element. so it seems "not displayed". - second one is when you invoke
showGroup()
, the second 2 group got the attach event from the service instance and try to attached spinner comp to the mask container dom element, but currently the container dom element maybe still not loaded(mounted into the document). in this case, the attach process will fail silently.
resolution
- about the case 1, I think the case is expected result.
- about the case 2, try to invoke
showGroup()
after the container dom element has loaded, for example, usengAfterViewInit
or other technology.
if you have any questions, fell free to let me know, thx.
from ngx-loading-mask.
FYI, the library use observer pattern to process the multiples directive communication. The loadingMaskService act as Observable(multi cast)
and the multiple directives act as Observer
, so I guess the issue occurred in spinner attaching process.
from ngx-loading-mask.
It really worked in the ngAfterViewInit event.
But, the GET services are in the ngOnInit event.
https://stackblitz.com/edit/haoliangwu-ngxloadingmask
from ngx-loading-mask.
hi @Albejr ,
if you have to put the business code into ngOnInit
lifecycle, to wait the container element loaded, you have two options:
- put the code into
setTimeout
something like:
// invoke the code into next event tick
setTimeout(() => {
this.loadingMaskService.showGroup('zone1');
this.loadingMaskService.showGroup('zone2');
setTimeout(() => {
this.loadingMaskService.hideGroup('zone1');
}, 5000);
setTimeout(() => {
this.loadingMaskService.hideGroup('zone2');
}, 3000);
})
- inject
ChangeDetectorRef
and trigger change detection manually
the code is:
constructor(
private loadingMaskService: LoadingMaskService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
// trigger change detection manually
this.cdr.detectChanges()
this.loadingMaskService.showGroup('zone1');
this.loadingMaskService.showGroup('zone2');
setTimeout(() => {
this.loadingMaskService.hideGroup('zone1');
}, 5000);
setTimeout(() => {
this.loadingMaskService.hideGroup('zone2');
}, 3000);
}
from ngx-loading-mask.
Related Issues (9)
- odule not found: Error: Can't resolve './ngx-loading-mask/loading-mask.service' HOT 1
- loading mask is not hide in version 5.x HOT 1
- ExpressionChangedAfterItHasBeenCheckedError error when use showGroup() directly HOT 1
- unable to build AOT HOT 1
- Multiples loaders should be both shut down HOT 3
- Throw Error from api in hideGroupError throw new error HOT 2
- Angular 6+ Support HOT 2
- updating to Angular v6 version HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-loading-mask.