要件:HTTPリクエストは非常に時間のかかるプロセスであり、ユーザーがフロントエンドでフォームを送信すると、バックエンドで様々なチェックと永続的なデータベースが必要で、データはネットワーク上で送信されます。 ユーザーがフォームを送信すると、ユーザーがインターフェース上のどのアクションもクリックできないようにしたい(あるいは「送信」を繰り返しクリックするのは避けたいです)。。 グローバルロード用のアニメーションが必要です。
ng-http-loader このパッケージはHTTPブロッカーといくつかのスピナーコンポーネント(現時点ではすべてSpinKitから提供)を提供します。 HTTPブロッカーはすべてのHTTPリクエストを受信し、保留中のHTTPリクエストの際にローテーション/ローダーインジケーターを表示します。
NPMアドレス:ハイパーリンクのログインが見えます。
GitHubアドレス:ハイパーリンクのログインが見えます。
Angularバージョンに応じて適切なng-http-loaderバージョンをインストールします。例としてAngular 17バージョンを挙げると、インストールコマンドは以下の通りです:
私は独立したコンポーネントなので、以下のように変更app.config.ts:
一方、app.component.ts成分は次のように修正されます。
最後に、app.component.htmlコードを以下のように修正します。
レンダリングは以下の通りです:
アニメーションスタイルの効果の読み込みに関する情報は、以下の項目を参照してください。
export const Spinkit = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-double-bounce',
skRotatingPlane: 'sk-rotationg-plane',
skSpinnerPulse:「sk-スピナー-パルス」
skThreeBounce: 'sk-three-bounce',
skWanderingCubes: 'sk-wandering-cubes',
skWave:「sk-wave」
};
|
掲載地 2024/06/10 15:09:56
|
|
|
|
