모든 HTTP 요청에 대한 진행률 막대 로딩 효과 만들기

안녕하세요, 1 분마다 렌더링되는 모든 API 또는 HTTP 요청에 대해 앵글 4에서 로딩 효과를 얻으려면 어떻게해야합니까? 이런 식으로 https://github.com/pleerock/ngx-progress-bar? 내가 대신 진행 바로드 텍스트의 모든 HTTP 요청에 대한 진행률 막대 로딩 효과 만들기

<body> 
    <div id="preloader" class="loader" style="display: none"> 
    <div class="d-flex align-items-center" style="height: 100%;"> 
     <div class="loader-content" title="0"> 
     Progress Bar Loading .... 
     </div> 
    </div> 


    </div> 
    <app-root class="">Loading...</app-root> 
</body>

당신이 보여 모든 HTML을 사용할 수있는 index.html을의 body 태그 내부에 각 4

출처

2017-11-27 Jydon Mah

추가 다음과 같은 HTML을 사용하여 내 자신의 사용자 정의 로딩 효과를 구축하려는 진행률 표시 줄 html. 그것을 사용하여 숨겨진 유지 style="display: none"

다음과 같이 preloader div를 표시하거나 숨기도록 서비스를 작성하십시오.

import { Injectable } from '@angular/core'; 

@Injectable() 
export class PreloaderService { 

    static showPreLoader() { 
    document.getElementById('preloader').style.display = 'block'; 
    } 
    static hidePreLoader() { 
    document.getElementById('preloader').style.display = 'none'; 
    } 

}

구성 요소 내부에서 다음과 같이 사용하십시오.

import { PreloaderService } from '../../../shared/services/preloader.service';

이 서비스는 두 개의 정적 방법, 표시하고 프리 로더를 숨기기 위해 사용이 있습니다. 이러한 서비스를 생성자 매개 변수로 제공 할 필요가 없습니다.

HTTP 요청

이

PreloaderService.showPreLoader();

이 후에 내가 그것을 사용하고 잘 작동 한 결과

에게 숨기기

PreloaderService.hidePreLoader();

출처

2017-11-27 02:17:17

있어보기 직전. 그것이 당신을 위해 작동한다면 나를 투표하십시오;) –

이 사람은 나를 위해 잘 작동합니다. 헤헤 –

모든 HTTP 요청에 대한 진행률 막대 로딩 효과 만들기

답변

관련 문제