اسکرول مجازی (Virtual Scrolling) در انگولار ۷ – آموزش انگولار ۷

  • چهارشنبه 28 آگوست 2019
  • بازدید ۱۹۶ نفر

angular7 materials cdk virtual scrolling 6630 تصویر

اسکرول مجازی (Virtual Scrolling) در انگولار ۷

اسکرول مجازی یکی از قابلیت هایی است که در انگولار ۷ به آن اضافه شده است. این قابلیت به CDK یا همان Component Development Kit افزوده شده است. قابلیت Virtual Scrolling به شما کمک می کند تا فقط عناصری را که در محدوده قابل دیده شدن هستند، در DOM لود شوند و آن هایی که قابل مشاهده نیستند نیز از DOM حذف شوند. به این ترتیب سرعت بارگذاری برنامه تا حد زیادی بالا می رود.

چرا باید از ماژول اسکرول مجازی استفاده کنیم؟

فرض کنید که یک لیست بزرگ دارید که در هنگام اجرا شدن برنامه همه اطلاعات آن لیست با هم بارگذاری می شوند. این موضوع باعث می شود تا برنامه شما در هنگام بارگذاری بسیار کند شوند. حال اگر برای بارگذاری این داده ها از قابلیت اسکرول مجازی استفاده کنیم، به جای آن که کل داده ها هم زمان بارگذاری شوند، فقط آن قسمتی که کاربر می تواند مشاهده کند، بارگذاری می شود.

برای استفاده از این قابلیت باید CDK را به پروژه خود اضافه کنید.

مانند نمونه زیر:

خروجی دستور فوق:

angular7 materials cdk drag and drop 6634 1 تصویر حال برای درک بهتر مفهوم پیمایش مجازی، یک مثال میزنیم. ابتدا مانند نمونه زیر ماژول Virtual Scrolling را به فایل app.module.ts اضافه کنید:

در کد فوق ما ScrollDispatchModule را import کرده و آن را به بخش imports نیز اضافه نموده ایم. گام بعدی گرفتن داده هایی است که برای نمایش در برنامه استفاده می شوند. ما برای گرفتن داده ها از سرویسی که در بخش های قبلی ایجاد کردیم، استفاده خواهیم کرد. ما داده ها را از آدرس https://jsonplaceholder.typicode.com/photos که شامل ۵۰۰۰ عکس است دریافت می کنیم. در ادامه ما داده ها را از آدرس گفته شده دریافت و با استفاده از ماژول اسکرول مجازی در صفحه نمایش می دهیم.

اگر آدرس https://jsonplaceholder.typicode.com/photos را در مرورگر خود باز کنید، خروجی زیر را مشاهده خواهید کرد:

angular7 materials cdk virtual scrolling 6630 2 تصویر

همانطور مشاهده می کنید، داده ها را به صورت JSON در اختیار ما قرار می دهد. هر بخش از این داده ها شامل یک url برای عکس اصلی  یک thumbnailUrl برای تصویر بند انگشتی دارد.

در زیر می توانید کد مربوط به سرویس myservice.service.ts که قرار است داده ها را بگیرید را مشاهده می کنید:

ما از این سرویس در فایل app.component.ts به صورت زیر استفاده می کنیم:

متغیر albumdetails داده های (۵۰۰۰ آیتم) دریافت شده از طریق api را در خود نگه می دارد. حال ما می توانیم این داده ها در فایل app.component.html نمایش دهیم. برای این که داده ها را با استفاده از اسکرول مجازی نمایش دهیم، باید از تگ <cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport> استفاده کنیم. در کد زیر نحوه استفاده از این تگ را مشاهده می کنید:

در شناسه و تصویر بندانگشتی را در صفحه نشان خواهیم داد. ما قبلا از *ngFor برای نمایش لیستی از آیتم ها استفاده می کردیم. اما در داخل تگ <cdk-virtual-scroll-viewport> باید از *cdkVirtualFor استفاده کنیم.

محتوای فایل CSS:

خروجی برنامه:

angular7 materials cdk virtual scrolling 6630 3 تصویر

با اسکرول کاربر، آیتم هایی که در محدوده قابل نمایش قرار می گیرند، لود می شوند.

angular7 materials cdk virtual scrolling 6630 4 تصویر

در مثال بالا به جای آن که همه ۵۰۰۰ آیتم یکجا بارگذاری شود، فقط آیتم هایی که با اسکرول کردن در محدوده قابل مشاهده قرار میگرند، بارگذاری می شوند. این ویژگی برای کارایی برنامه بسیار مفید است.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است