🚀 پیمایش مجازی در زاویه ای: لیست های نامحدود بدون از دست دادن عملکرد بارگذاری می شود!

🧐 پیمایش مجازی چیست؟

پیمایش مجازی یک تکنیک ارائه است که در آن فقط عناصر قابل مشاهده روی صفحه ترسیم شده اند به جای بارگیری کل لیست در DOM.

📌 فواید:

✅ عملکرد در لیست های طولانی را بهبود بخشید.

remation کاهش حافظه و پردازش.

✅ رابط را روان و سریعتر می کند.

🔥 مثال کلاسیک بدون پیمایش مجازی:

اگر لیستی از 10،000 عنصر، زاویه ای آنها را ارائه می دهد همه در DOM ، تبدیل شدن به صفحه آهسته و سنگینبشر

💡 پیمایش مجازی، فقط عناصر قابل مشاهده روی صفحه نمایش ، بارگیری دیگران است پویا با حرکت کاربر.

📌 چه موقع از پیمایش مجازی استفاده کنیم؟

🔹 لیست با بسیاری از عناصر (1000+).

🔹 هنگام عملکرد تحت تأثیر قرار می گیرد برای بسیاری از عناصر روی صفحه نمایش.

🔹 در صورت نیاز بهینه کردن استفاده از حافظه و بهبود UX.

🛠 اجرای پیمایش مجازی در زاویه ای

برای استفاده از پیمایش زاویه ای ، ما نیاز داریم CDK زاویه ای (کیت Dev Component)، که ابزارهایی برای بهبود رابط کاربری فراهم می کند.

1⃣ CDK زاویه ای را نصب کنید

اگر هنوز CDK زاویه ای نصب نشده اید ، آن را با این دستور اضافه کنید:

npm install @angular/cdk

2 ⃣ واردات ScrollingModule در ماژول شما

پرونده را باز کنید app.module.ts و ماژول جابجایی را وارد می کند:

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    ScrollingModule  // 📌 Importamos el módulo
  ],
})
export class AppModule { }

3 ⃣ لیستی با پیمایش مجازی ایجاد کنید

اکنون ما قصد داریم یک جزء با لیستی از آن ایجاد کنیم 10،000 عنصر، اما فقط قابل مشاهده است.

📌 کد مؤلفه (virtual-scroll.component.ts):

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

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items = Array.from({ length: 10000 }, (_, i) => `Elemento #${i}`);
}

📌 کد HTML (virtual-scroll.component.html):

 itemSize="50" class="scroll-container">
  
 *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  

🎯 توضیح:

✅ منطقه جابجایی مجازی را تعریف کنید.

✅ itemSize="50" → اندازه هر عنصر را در پیکسل ها تعیین کنید (آن را مطابق با طرح تنظیم کنید).

✅ *cdkVirtualFor="let item of items" → همان کار را انجام می دهد *ngFor، اما با پیمایش مجازی.

📌 کد سبک (virtual-scroll.component.css):

.scroll-container {
  height: 400px;  /* Altura fija del contenedor */
  width: 100%;
  border: 1px solid #ccc;
  overflow: auto;
}

.item {
  height: 50px;  /* Debe coincidir con itemSize */
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

🎯 پیمایش مجازی چگونه کار می کند؟

1⃣ کاربر لیست را جابجا می کندبشر

2⃣ زاویه دار فقط رندریزا عناصر قابل مشاهده در منظره.

3⃣ عناصری که از دید خارج می شوند از DOM حذف می شوند، صرفه جویی در حافظه.

4⃣ با پایین آمدن کاربر ، عناصر جدید اضافه می شوند پویا

🔥 پیشرفت های پیشرفته با پیمایش مجازی

1⃣ از پیمایش مجازی با API (داده های پویا) استفاده کنید

اگر داده ها از API تهیه شده است ، می توانید آنها را با پیمایش مجازی ترکیب کنید تا اطلاعات را به طور موثر بارگیری کنید.

مثال با درخواست های HTTP:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-virtual-scroll-api',
  templateUrl: './virtual-scroll-api.component.html',
  styleUrls: ['./virtual-scroll-api.component.css']
})
export class VirtualScrollApiComponent implements OnInit {
  items: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts')
      .subscribe(data => {
        this.items = data;
      });
  }
}

📌 HTML برای API (virtual-scroll-api.component.html):

 itemSize="50" class="scroll-container">
  
 *cdkVirtualFor="let item of items" class="item">
    {{ item.id }} - {{ item.title }}