آموزش ظروف تو در تو در انگولار ۲

آموزش ظروف تو در تو در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ظروف تو در تو در انگولار ۲ خواهیم پرداخت.

در Angular JS می توان ظروف را داخل یکدیگر تو در تو کرد. ظرف بیرونی به عنوان ظرف اصلی و ظرف داخلی به عنوان ظرف کودک شناخته می شود. بیایید به یک مثال در مورد چگونگی دستیابی به این هدف نگاه کنیم. در ادامه مراحل آمده است.

مرحله ۱ – یک فایل ts برای ظرف کودک با نام child.component.ts ایجاد کنید.

مرحله ۲ – در فایل ایجاد شده در مرحله بالا ، کد زیر را قرار دهید.

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

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

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

کد بالا مقدار پارامتر this.values ​​را بر روی “Hello” تنظیم می کند.

مرحله ۳ – در فایل app.component.ts کد زیر را قرار دهید.

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

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

در کد بالا توجه داشته باشید که ما در حال حاضر برای وارد کردن ماژول child.component عبارت import را فرا می خوانیم. همچنین در حال فراخوانی <child-app> از جزء کودک به جزء اصلی خود هستیم.

مرحله ۴ – در مرحله بعد ، ما باید مطمئن شویم که جزء فرزند نیز در فایل app.module.ts گنجانده شده است.

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

import { 
   BrowserModule 
} from '@angular/platform-browser';  

import { 
   AppComponent 
} from './app.component';  

import { 
   MultiplierPipe 
} from './multiplier.pipe' 

import { 
   ChildComponent 
} from './child.component';  

@NgModule ({ 
   imports: [BrowserModule], 
   declarations: [AppComponent, MultiplierPipe, ChildComponent], 
   bootstrap: [AppComponent] 
}) 

export class AppModule {}

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

منبع.

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

1. آموزش انگولار ۲
2.  مرور کلی آنگولار ۲
3. آموزش محیط انگولار ۲ 
4. آموزش Hello World در انگولار ۲
5. آموزش ماژول ها در انگولار ۲
6. آموزش معماری در انگولار ۲
7. آموزش کامپوننت ها در انگولار ۲
8. آموزش قالب ها در انگولار ۲
9. آموزش دستورالعمل ها در انگولار ۲
10. آموزش متادیتا در انگولار ۲
11. آموزش اتصال داده ها در انگولار ۲
12. آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲
13. آموزش مدیریت خطا در انگولار ۲
14. آموزش مسیریابی در انگولار ۲
15. آموزش ناوبری در انگولار ۲
16. آموزش فرم ها در انگولار ۲
17. آموزش CLI در انگولار ۲
18. آموزش تزریق وابستگی در انگولار ۲
19. آموزش پیکربندی پیشرفته در انگولار ۲
20. آموزش کنترل های شخص ثالث در انگولار ۲
21. آموزش نمایش داده ها در انگولار ۲
22. آموزش مدیریت رویدادها در انگولار ۲
23. آموزش تبدیل داده ها در انگولار ۲
24. آموزش Pipe سفارشی در انگولار ۲
25.  آموزش ورودی کاربر در انگولار ۲
26. آموزش Lifecycle Hooks در انگولار ۲