در این مقاله میخواهم نحوه نمایش یک ماسک لودر را برای تمام صفحات در برنامههای Angular توضیح دهم که عناصر html زیرین را هنگام بارگیری صفحه یا در حین پسبازگشت با استفاده از CSS غیرفعال میکند.
با استفاده از لودر میتوانیم تا زمانی که صفحه به طور کامل بارگیری شود، از هرگونه فعالیت ماوس روی صفحه جلوگیری کنیم. این برنامه با چرخش بارگیری برای نشان دادن عملیات ناهمگام در اختیار برنامه قرار می دهد.
یک کامپوننت لودر ایجاد کنید
Loader.component.html
کد زیر را در فایل html کامپوننت Loader قرار دهید.
- <style>
- .loadWrapper {
- background: rgba(0,0,0,0.3);
- width: 100%;
- height: 100%;
- position: fixed;
- top:0px;
- left:0px;
- z-index: 99999;
- }
- </style>
- <div class="loadWrapper" *ngIf="loader">
- <div class="loader">
- <svg class="circular" viewBox="25 25 50 50">
- <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
- </svg>
- </div>
- </div>
سپس یک فایل ts ایجاد کنید و کد زیر را در آن قرار دهید.
Loader.component.ts
- import { Component, Input, OnInit } from '@angular/core';
- @Component({
- selector: 'app-loader',
- templateUrl: './loader.component.html'
- })
- export class LoaderComponent implements OnInit {
- @Input() loader:boolean = false;
- constructor () {}
- ngOnInit() { }
- }
وارد کردن جزء
مطابق شکل زیر، کامپوننت لودر را در ماژول برنامه root وارد کنید
- import { LoaderComponent } from './components/loader/loader.component';
- @NgModule({
- declarations: [
- .
- .
- LoaderComponent],
- exports: [LoaderComponent
- ],
جزء لودر را در اجزای دیگر قرار دهید
سپس، انتخابگر مؤلفه بارگیری را به قالب دیگر مؤلفه برنامه اضافه کنید. ما میتوانیم از کامپوننت لودر در صفحات دیگری که میخواهیم تصویر لودر را در حین بارگذاری صفحه نمایش دهیم و در جایی که نمای آیکون لودر قبلاً وجود داشت، استفاده کنیم.
این تگ Html را در هر جایی از نما اضافه کنید،
<app-loader [loader]="isLoading"></app-loader>
isLoading می تواند به عنوان یک اتصال ویژگی Angular استفاده شود. این یک داده یک طرفه است که از خاصیت isLoading کامپوننت مربوطه به ویژگی loader مولفه لودر متصل می شود. این Boolean به عنوان ورودی مولفه Loader استفاده می شود و تعیین می کند که چه زمانی چرخنده لودر باید قابل مشاهده باشد.
اکنون هر زمان که صفحه بارگیری می شود یا هر عملیاتی در صفحه سایت فعال می شود، باید ویژگی isLoading را در ابتدا درست تنظیم کنیم تا نماد بارگیری در نمای html نمایش داده شود. در پایان منطق یا پس از اتمام بارگذاری، تمام مجموعه داده ها دارای ویژگی Loading به عنوان false است تا نماد پنهان شود و نمای html به طور معمول نمایش داده شود.
- Submit(){
- this.isLoading = true;
- this.dataService.httpGet("../..")
- .subscribe((data: any) => {
- //load data
- this.isLoading = false;
- },
- err => {
- this.isLoading = false;
- }
- );
- }
با استفاده از این، ما اکنون یک اسپینر بارگیری داریم که کاملاً با استفاده از CSS ایجاد شده و در نمای قالب کامپوننت html قرار داده شده است که میتوانیم اسپینر بارگیری را تنظیم یا تنظیم کنیم. در اینجا اسکرین شات تصویر اسپینر است که کاربر را از کلیک کردن یا انجام هر گونه فعالیت دیگری از ماوس بر روی صفحه باز می دارد.
خلاصه
در این مقاله نحوه ایجاد یک ماسک لودر با استفاده از CSS برای تمام صفحات در برنامه های Angular را بررسی کرده ایم که رویدادهای کلیک را تا زمانی که صفحه به طور کامل بارگیری شود غیرفعال می کند.