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

3 سال پیش

امتیاز دهید post

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

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

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

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

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

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

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

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

import {

Component

} from '@angular/core';

@Component ({

selector: 'child-app',

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

})

export class ChildComponent {

values = '';

ngOnInit() {

this.values = "Hello";

}

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

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

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

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

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

export class AppComponent { }

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> از جزء کودک به جزء اصلی خود هستیم.

مرحله 4 – در مرحله بعد ، ما باید مطمئن شویم که جزء فرزند نیز در فایل 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 {}

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 {}

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

Nested Containers

منبع.

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

امتیاز دهید post

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

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

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

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

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

دیدگاه شما

بدون دیدگاه

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

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

دیدگاه شما

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

بدون دیدگاه