🔥 چه موقع یک مؤلفه `onpush` به روز می شود؟

وقتی یک مؤلفه داشته باشد اپشکر، فقط در صورت بروز آن به روز می شود هر یک از این شرایط:

1⃣ تغییر در @Input()

اگر ارزش @Input() مرجع را تغییر دهید، Angular مؤلفه را به روز می کند.

✅ به روز می شود زیرا مرجع تغییر می کند (شیء جدید)

this.producto = { nombre: 'Nuevo Producto' }; 
// Esto genera una nueva referencia en memoria

❌ اگر فقط یک خاصیت داخلی اصلاح شود ، به روز نمی شود

this.producto.nombre = 'Nuevo Producto';
// No cambia la referencia del objeto en memoria, Angular no lo detecta

💡 راه حل: برای وادار کردن تشخیص تغییرات ، یک شی جدید را اختصاص دهید:

this.producto = { ...this.producto, nombre: 'Nuevo Producto' };

2⃣ EventOS del Dom (کلیک ، ورودی و غیره)

اگر مؤلفه رویدادی مانند آن داشته باشد (click)با (input)با (change)، و غیره ، Angular تغییر را تشخیص می دهد.

 (click)="cambiarValor()">Actualizar

cambiarValor() {
  this.valor = 'Nuevo';
}

این همیشه به روز می شود نمای ، حتی با OnPushبشر

3 ⃣ استفاده از async در الف | async لوله (مشاهده)

اگر از لوله استفاده می کنید async، Angular هنگامی که قابل مشاهده یک مقدار جدید را منتشر می کند ، به طور خودکار مؤلفه را به روز می کند.

{{ datos$ | async }}

datos$ = this.http.get('https://api.example.com/data');

4⃣ تغییرات دستی با markForCheck()

اگر نیاز دارید که مؤلفه را به صورت دستی به روز کنید ، می توانید از آن استفاده کنید ChangeDetectorRef.markForCheck()بشر

constructor(private cd: ChangeDetectorRef) {}

actualizar() {
  this.valor = 'Nuevo';
  this.cd.markForCheck(); // 🔥 Forzar actualización
}

5⃣ تغییر در یک متغیر در a setTimeout ای setInterval

اگر متغیر را در درون تغییر دهیم setTimeout، زاویه ای آن را تشخیص نمی دهد مگر اینکه ما استفاده کنیم markForCheck()بشر

❌ به طور خودکار به روز نمی شود

setTimeout(() => {
  this.valor = 'Nuevo';
}, 2000);

✅ راه حل با markForCheck()

setTimeout(() => {
  this.valor = 'Nuevo';
  this.cd.markForCheck();
}, 2000);

6⃣ بعد از دادخواست HTTP دستی تغییر می کند

اگر مقدار جدیدی را پس از درخواست HTTP بدون آن اختصاص دهیم async، زاویه دار به طور خودکار آن را تشخیص نمی دهدبشر

❌ به طور خودکار به روز نمی شود

this.http.get('https://api.example.com/data').subscribe(data => {
  this.valor = data;
});

✅ راه حل با markForCheck()

this.http.get('https://api.example.com/data').subscribe(data => {
  this.valor = data;
  this.cd.markForCheck();
});

7⃣ دوباره تشخیص تغییرات را با reattach()

اگر در هر زمان تشخیص تغییرات با آن غیرفعال شود cd.detach()، ما می توانیم دوباره آن را با آن فعال کنیم reattach()بشر

this.cd.detach(); // 🛑 Detiene la detección
this.cd.reattach(); // 🔄 Reactiva la detección

📌 خلاصه نهایی

اگر یک مؤلفه داشته باشد OnPushبا انفرادی در صورت بروز هر یک از این رویدادها به روز می شود:

🎯 پایان

🔹 OnPush بهبود عملکرد زیرا مانع از بررسی زاویه ای در هر چرخه تغییر می شود.

🔹 با این حال ، همچنان به روز می شود در شرایط کلیدی به عنوان تغییر در @Input، رویدادهای del dom با استفاده از آن markForCheck()بشر

🔹 اگر نیاز به تغییر دستی دارید، ایالات متحده markForCheck() ای detectChanges()بشر

حالا شما دارید دانش کامل در OnPush و هنگامی که اجزای به روز می شوند. 🚀🔥