Angular 17 시리즈 (XIX) 전역 설정 HTTP 요청 로딩 애니메이션

작은 쓰레기 같은 놈들 · 게시됨 2024. 6. 10. 오후 3:09:56

요구사항: HTTP 요청은 매우 시간이 많이 소요되는 과정입니다. 사용자가 프론트엔드에서 폼을 제출하면 백엔드에서 다양한 검사와 지속적인 데이터베이스가 필요하며, 데이터는 네트워크를 통해 전송됩니다. 사용자가 양식을 제출할 때, 우리는사용자가 인터페이스의 어떤 동작을 클릭하지 못하게 하거나(또는 반복해서 제출을 클릭하지 않게 하려 하죠)。 전역 로딩용 애니메이션이 필요합니다.

ng-http-loader 이 패키지는 HTTP 차단기와 일부 스피너 컴포넌트를 제공합니다(현재는 모두 SpinKit에서 제공됩니다). HTTP 차단기는 모든 HTTP 요청을 듣고, 대기 중인 HTTP 요청 시 로테이터/로더 표시기를 표시합니다.

NPM 주소:하이퍼링크 로그인이 보입니다.
GitHub 주소:하이퍼링크 로그인이 보입니다.

Angular 버전을 예로 들어 Angular 17에 맞는 ng-http-loader 버전을 설치하세요. 설치 명령어는 다음과 같습니다:

로그인이 보이네요.

저는 독립형 컴포넌트이기 때문에 다음과 같이 app.config.ts 수정했습니다:

로그인이 보이네요.

한편, app.component.ts 구성 요소는 다음과 같이 수정됩니다:

로그인이 보이네요.

마지막으로, app.component.html 코드를 다음과 같이 수정하세요:

로그인이 보이네요.

렌더링은 다음과 같습니다:

애니메이션 스타일 효과 로딩에 관한 정보는 다음 항목을 참고하시기 바랍니다:

export const Spinkit = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-더블-바운스',
skRotatingPlane: 'sk-회전g-평면',
skSpinnerPulse: 'sk-스피너-펄스',
skThreeBounce: 'sk-three-bounce',
skWanderingCubes: 'sk-방황-큐브',
skWave: 'sk-wave'
};

(끝)

[각] Angular 17 시리즈 (XIX) 전역 설정 HTTP 요청 로딩 애니메이션

관련 게시물

본 섹션