آموزش Lifecycle Hooks در انگولار 2

saber

3 سال پیش

امتیاز دهید post

آموزش Lifecycle Hooks در انگولار 2

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Lifecycle Hooks در انگولار 2 خواهیم پرداخت.

برنامه انگولار 2 مجموعه کاملی از فرایندها را طی می کند یا از شروع تا پایان برنامه دارای چرخه حیات است.

نمودار زیر کل فرایندهای چرخه عمر برنامه انگولار 2 را نشان می دهد.

Lifecycle
در زیر شرح هر قلاب چرخه زندگی است.

ngOnChanges – هنگامی که مقدار یک ویژگی داده محدود می شود ، این روش نامیده می شود.

ngOnInit-هر زمان که مقداردهی اولیه دستورالعمل/جزء پس از اولین نمایش انگولار برای اولین بار از ویژگی های محدود به داده رخ می دهد، نامیده می شود.

ngDoCheck – این برای تشخیص و اعمال تغییرات است که انگولار به تنهایی نمی تواند یا نمی تواند تشخیص دهد.
ngAfterContentInit – بعد از اینکه انگولار محتوای خارجی را در نمای کامپوننت نمایش داد، در پاسخ فراخوانی می شود.
ngAfterContentChecked – بعد از اینکه انگولار محتوای پیش بینی شده در کامپوننت را بررسی کرد، در پاسخ فراخوانی می شود.
ngAfterViewInit – بعد از اینکه انگولار نمایه های کامپوننت و نماهای فرزند را مقداردهی کرد، در پاسخ فراخوانی می شود.
ngAfterViewChecked – بعد از اینکه انگولار نمای کامپوننت و نمای فرزند را بررسی می کند، در پاسخ فراخوانی می شود.
ngOnDestroy – این مرحله پاکسازی است درست قبل از اینکه Angular دستورالعمل/جزء را از بین ببرد.

در زیر نمونه ای از پیاده سازی یک Lifecycle Hooks است. در فایل app.component.ts کد زیر را قرار دهید.

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

@Component ({ 
   selector: 'my-app', 
   template: '&lt;div&gt; {{values}} &lt;/div&gt; ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

import {

Component

} from '@angular/core';

@Component ({

selector: 'my-app',

template: '<div> {{values}} </div> '

})

export class AppComponent {

values = '';

ngOnInit() {

this.values = "Hello";

}

در برنامه فوق، از قلاب چرخه ngOnInit استفاده می کنیم تا مشخص شود که مقدار پارامتر this.values باید روی “Hello” تنظیم شود.

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را رفرش کردید، خروجی زیر را دریافت خواهید کرد.

Hello

منبع.

لیست جلسات قبل آموزش آنگولار 2

امتیاز دهید post

برچسب ها : آموزش انگولار 2 آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش Lifecycle Hooks در انگولار 2

آموزش Lifecycle Hooks در انگولار 2

لیست جلسات قبل آموزش آنگولار 2

دیدگاه شما

بدون دیدگاه

آموزش Lifecycle Hooks در انگولار 2

لیست جلسات قبل آموزش آنگولار 2

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه