entityMap|blocks|key|37l0h|text|您可以为每个子组件设置isLoaded标志。然后，通过服务将标志状态共享给您的父组件。父组件的isLoaded标志将是子组件的isLoaded的组合|type|unstyled|depth|inlineStyleRanges|entityRanges|data|b397r^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|D|9|@]|A|@]|B|$]]|$2|C|4|-4|6|7|8|E|9|@]|A|@]|B|$]]]]

<p>You can make isLoaded flag for each child component.
Then, share the flag state via service to ur parent component. The isLoaded flag of the parent component would be a combo of isLoaded of children</p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://firstclassjs.com/display-a-loader-on-every-http-request-using-interceptor-in-angular-7/|blocks|key|442hc|text|我们放在整个应用程序上的加载器不就是这种情况吗？|unstyled|depth|inlineStyleRanges|entityRanges|3rrjv|您需要“实现”HttpInterceptor，并通过将它们与加载器服务相关联来使用其中的加载器。|c61bv|下面是HttpInterceptor的一个示例实现。|atggu|@Injectable()
export+class+LoaderInterceptor+implements+HttpInterceptor+{
++++constructor(public+loaderService:+LoaderService)+{+}
++++intercept(req:+HttpRequest<any>,+next:+HttpHandler):+Observable<HttpEvent<any>>+{
++++++++this.loaderService.show();
++++++++return+next.handle(req).pipe(
++++++++++++finalize(()+=>+this.loaderService.hide())
++++++++);
++++}
}|code-block|syntax|javascript|9v72|你可以阅读更多关于它的here。|offset|length|8nqvq|您也可以在上面的LoaderInterceptor中使用计数器变量。这显然是一个主题，您应该将其值发送给LoaderService+(根据调用initiated/completed递增/递减之后)，其中当计数器大于0时，show变量将变为true，反之亦然。|style|CODE|d0s28^0|0|0|0|0|B|4|0|0|8|H|1G|D|32|4|3B|4|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|10|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|11|G|@]|H|@]|6|$]]|$A|K|C|L|2|E|F|12|G|@]|H|@]|6|$]]|$A|M|C|N|2|O|F|13|G|@]|H|@]|6|$P|Q]]|$A|R|C|S|2|E|F|14|G|@]|H|@$T|15|U|16|A|17]]|6|$]]|$A|V|C|W|2|E|F|18|G|@$T|19|U|1A|X|Y]|$T|1B|U|1C|X|Y]|$T|1D|U|1E|X|Y]|$T|1F|U|1G|X|Y]]|H|@]|6|$]]|$A|Z|C|-4|2|E|F|1H|G|@]|H|@]|6|$]]]]

<p>Isn't it the case with the loaders that we put on the entire app itself?</p>

<p>You need to "implement" HttpInterceptor and use the loader in there by attaching both of these with a loader service.</p>

<p>Here's a sample implementation of HttpInterceptor.</p>

<pre><code>@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
    constructor(public loaderService: LoaderService) { }
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
        this.loaderService.show();
        return next.handle(req).pipe(
            finalize(() =&gt; this.loaderService.hide())
        );
    }
}
</code></pre>

<p>You can read more about it <a href="https://firstclassjs.com/display-a-loader-on-every-http-request-using-interceptor-in-angular-7/" rel="nofollow noreferrer">here</a>.</p>

<p>You can also go for a counter variable in the <code>LoaderInterceptor</code> above as well. This would clearly be a subject the value of which you would emit to <code>LoaderService</code> (after incrementing/decrementing according to call initiated/completed) where the <code>show</code> variable would turn <code>true</code> when the counter is greater than 0 and vice versa.</p>


entityMap|blocks|key|48alu|text|您可以使用HttpInterceptor来感知应用程序中正在进行的任何HTTP活动，并创建一个在其中保留HTTP活动标志的服务。现在，在根组件中，只需检查该标志并显示一个正在加载的微调器。这样，您就不必单独处理每个子组件和子组件的加载栏的显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|878b7|HTTPInterceptor及相关服务的代码如下。|fv9pa|​|c4uo7|import+{+Injectable+}+from+'@angular/core';
import+{+Observable,+of,+throwError+}+from+'rxjs';
import+{
++HttpEvent,
++HttpHandler,
++HttpInterceptor,
++HttpRequest
}+from+'@angular/common/http';

import+{+BehaviorSubject+}+from+'rxjs';
import+{+catchError,+finalize,+map+}+from+'rxjs/operators';

@Injectable()
export+class+HTTPStatus+{
++private+requestInFlight$:+BehaviorSubject<boolean>;
++constructor()+{
++++this.requestInFlight$+=+new+BehaviorSubject(false);
++}

++setHttpStatus(inFlight:+boolean)+{
++++this.requestInFlight$.next(inFlight);
++}

++getHttpStatus():+Observable<boolean>+{
++++return+this.requestInFlight$.asObservable();
++}
}

@Injectable()
export+class+HTTPListener+implements+HttpInterceptor+{
++constructor(private+status:+HTTPStatus)+{
++}

++intercept(
++++req:+HttpRequest<any>,
++++next:+HttpHandler
++):+Observable<HttpEvent<any>>+{
++++return+next.handle(req).pipe(
++++++map(event+=>+{
++++++++this.status.setHttpStatus(true);
++++++++return+event;
++++++}),catchError(error+=>+{
++++++++return+Observable.throw(error);
++++++}),
++++++finalize(()+=>+{
++++++++this.status.setHttpStatus(false);
++++++})
++++)
++}
}|code-block|syntax|javascript|dgsm3|6m93k|在您的根应用程序组件中注入HTTPStatus服务。|1i26b|1qnhe|++HTTPActivity:+boolean;

++constructor(private+httpStatus:+HTTPStatus)+{
++++this.httpStatus.getHttpStatus().subscribe(status+=>+{+this.HTTPActivity+=+status;+});
++}|2ubc6|snb6|在组件的.html部分，现在可以通过检查HTTPActivity布尔变量来显示/隐藏加载栏或微调器。|4co7|71jkp|<div+id="preloader"+[hidden]=!HTTPActivity>
++<div+id="loader"></div>
</div>|263fa|8r1gh|当然，您必须在模块的提供者数组中注册HTTPListener和HTTPStatus服务。|9gh7m|谢谢。|8gff7^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|13|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|14|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|15|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|16|9|@]|A|@]|B|$J|K]]|$2|L|4|F|6|7|8|17|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|18|9|@]|A|@]|B|$]]|$2|O|4|F|6|7|8|19|9|@]|A|@]|B|$]]|$2|P|4|Q|6|I|8|1A|9|@]|A|@]|B|$J|K]]|$2|R|4|F|6|7|8|1B|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1C|9|@]|A|@]|B|$]]|$2|U|4|F|6|7|8|1D|9|@]|A|@]|B|$]]|$2|V|4|W|6|I|8|1E|9|@]|A|@]|B|$J|K]]|$2|X|4|F|6|7|8|1F|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|7|8|1G|9|@]|A|@]|B|$]]|$2|10|4|11|6|7|8|1H|9|@]|A|@]|B|$]]|$2|12|4|-4|6|7|8|1I|9|@]|A|@]|B|$]]]]

<p>You can use HttpInterceptor to sense any HTTP activity going on in the application and create a service that keep HTTP activity flag inside it. Now in your root component, just check that flag and show a loading spinner. This way you'll not have to individually handle showing of loading bar for each child and sub-child components. </p>

<p>The code for HTTPInterceptor and related service shall be like this.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest
} from '@angular/common/http';

import { BehaviorSubject } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';

@Injectable()
export class HTTPStatus {
  private requestInFlight$: BehaviorSubject&lt;boolean&gt;;
  constructor() {
    this.requestInFlight$ = new BehaviorSubject(false);
  }

  setHttpStatus(inFlight: boolean) {
    this.requestInFlight$.next(inFlight);
  }

  getHttpStatus(): Observable&lt;boolean&gt; {
    return this.requestInFlight$.asObservable();
  }
}

@Injectable()
export class HTTPListener implements HttpInterceptor {
  constructor(private status: HTTPStatus) {
  }

  intercept(
    req: HttpRequest&lt;any&gt;,
    next: HttpHandler
  ): Observable&lt;HttpEvent&lt;any&gt;&gt; {
    return next.handle(req).pipe(
      map(event =&gt; {
        this.status.setHttpStatus(true);
        return event;
      }),catchError(error =&gt; {
        return Observable.throw(error);
      }),
      finalize(() =&gt; {
        this.status.setHttpStatus(false);
      })
    )
  }
}</code></pre>
</div>
</div>
</p>

<p>Inject the HTTPStatus service in your root app-component.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  HTTPActivity: boolean;

  constructor(private httpStatus: HTTPStatus) {
    this.httpStatus.getHttpStatus().subscribe(status =&gt; { this.HTTPActivity = status; });
  }</code></pre>
</div>
</div>
</p>

<p>In the .html part of your component, now you can show / hide loading bar or spinner by checking the HTTPActivity boolean variable.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="preloader" [hidden]=!HTTPActivity&gt;
  &lt;div id="loader"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Ofcourse you'll have to register HTTPListener and HTTPStatus service in the providers array of your module.</p>

<p>Thanks.</p>


<p>I have components with loading bar, which shows and hides from boolean variable called <code>isLoading</code>. For example: </p>

<pre><code>ngOnInit() {
  this.isLoading = true;
  this.someService.getAll().subscribe(data =&gt; { 
    // some code...
    this.isLoading = false;
  });
}
</code></pre>

<pre><code>&lt;loading-bar *ngIf="isLoading"&gt;&lt;/loading-bar&gt;
</code></pre>

<p>But I have a problem, when there are child components in the main component and the data loads from them. The loading bar should be in the main component and should be hide only when data from all child components arrive. What is the best way to achieve this.</p>


What is the best way to show loading bar until data in all child and sub child components arrive in Angular

 我有一个带加载栏的组件，它可以显示和隐藏一个名为isLoading的布尔变量。例如： ngOnInit() {  this.isLoading = true;  this.someService.getAll().subscribe(data => {     // some code...    this.isLo...

问在所有子组件和子组件中的数据到达Angular之前，显示加载栏的最佳方式是什么
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在所有子组件和子组件中的数据到达Angular之前，显示加载栏的最佳方式是什么EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在所有子组件和子组件中的数据到达Angular之前，显示加载栏的最佳方式是什么
EN