آموزش کامپوننت ها در انگولار ۴

erfan molaei
3 سال پیش

آموزش کامپوننت ها در انگولار ۴

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

بخش عمده ای از توسعه با انگولار ۴ در قطعات انجام می شود. کامپوننت ها اساساً کلاس هایی هستند که با فایل html. کامپوننت که در مرورگر نمایش داده می شود تعامل دارند. ما ساختار فایل را در یکی از فصل های قبلی خود دیده ایم. ساختار فایل دارای جزء برنامه است و شامل فایلهای زیر است –

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

وقتی پروژه جدیدی را با استفاده از دستور angular-cli ایجاد کردیم ، فایل های فوق به طور پیش فرض ایجاد شدند.

اگر فایل app.module.ts را باز کنید ، برخی کتابخانه ها وارد شده اند و همچنین یک اعلان است که کامپوننت برنامه را به شرح زیر اختصاص داده است –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

export class AppModule { }

 

اعلامیه شامل متغیر AppComponent، که ما در حال حاضر وارد شده است. این جزء اصلی می شود.

در حال حاضر ، angular-cli فرمان ایجاد کامپوننت خود را دارد. با این حال جزء برنامه که به طور پیش فرض ایجاد می شود ، همیشه والد باقی می ماند و اجزای بعدی ایجاد شده، اجزای فرزند را تشکیل می دهند.

اکنون فرمان ایجاد کامپوننت را اجرا می کنیم.

ng g component new-cmp

 

هنگامی که شما دستور بالا اجرا در خط فرمان، شما را به خروجی زیر دریافت –

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

 

حال اگر برویم و ساختار فایل را بررسی کنیم، پوشه new-cmp new ایجاد شده در زیر پوشه src/app را دریافت می کنیم.

  • new-cmp.component.html- فایل CSS برای جزء جدید ایجاد می شود.
  • جدید cmp.component.html – فایل HTML ایجاد می شود.
  • new-cmp.component.spec.ts-این می تواند برای آزمایش واحد استفاده شود.
  • new-cmp.component.ts – در اینجا، ما می توانید ماژول تعریف، خواص، و غیره

تغییرات به فایل app.module.ts به شرح زیر اضافه می شود –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

 

فایل new-cmp.component.ts به شرح زیر است تولید –

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .

@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

 

اگر فایل new-cmp.component.ts فوق را مشاهده کردید ، یک کلاس جدید به نام NewCmpComponent ایجاد می کند که OnInit را پیاده سازی می کند. که دارای سازنده و متدی به نام ()ngOnInit است. ngOnInit به صورت پیش فرض هنگام اجرای کلاس فراخوانی می شود.

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

وقتی url را در مرورگر http: // localhost: 4200/می زنیم ، ابتدا فایل index.html را که در زیر نشان داده شده است اجرا می کند –

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</title>
      <base href = "/">
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

 

بالا فایل HTML عادی است و ما هیچ چیز است که در مرورگر چاپ نیست. به برچسب قسمت بدن نگاه کنید.

<app-root></app-root>

 

این لیبل اصلی است که توسط انگولار به طور پیش فرض ایجاد شده است. این تگ دارای مرجع در فایل main.ts است.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

 

AppModule از برنامه ماژول اصلی وارد می شود و همان را به ماژول بوت استرپ می دهد ، که باعث می شود برنامه آپلود شود.

اجازه دهید فایل app.module.ts را ببینیم –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

 

در اینجا AppComponent نام داده شده است ، یعنی متغیری برای ذخیره مرجع برنامه. Component.ts و همان است که داده شده به خود راه انداز. اجازه دهید اکنون فایل app.component.ts را ببینیم.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

 

هسته زاویه ای وارد شده و به عنوان کامپوننت شناخته می شود و در اعلان کننده از آن استفاده می شود –

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

 

در اعلان کننده مرجع انتخاب کننده، templateUrl و styleUrl آورده شده است. انتخابگر در اینجا چیزی نیست جز برچسبی که در فایل index.html که در بالا دیدیم قرار می گیرد.

کلاس AppComponent دارای متغیری به نام title است که در مرورگر نمایش داده می شود.

کامپوننت از templateUrl به نام app.component.html استفاده می کند که به شرح زیر است –

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

 

این فقط کد html و عنوان متغیر را در براکت های مجعد دارد. با مقدار موجود در فایل app.component.ts جایگزین می شود. به این می گویند اتصال. ما در درس بعد مفهوم الزام آور را مورد بحث قرار خواهیم داد.

اکنون که ما یک کامپوننت جدید به نام new-cmp ایجاد کردیم. وقتی دستور ایجاد یک کامپوننت جدید اجرا می شود ، همین مورد در فایل app.module.ts گنجانده می شود.

app.module.ts مرجع کامپوننت جدید ایجاد شده است.

اجازه دهید فایل های جدید ایجاد شده در new-cmp را بررسی کنیم.

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

 

در اینجا ما باید هسته را نیز وارد کنیم. مرجع جزء در اعلان کننده استفاده می شود.

اعلان کننده دارای انتخاب کننده ای به نام app-new-cmp و templateUrl و styleUrl است.

.html به نام new-cmp.component.html به شرح زیر است-

<p>
   new-cmp works!
</p>

 

همانطور که در بالا مشاهده شد ، ما کد html داریم ، یعنی تگ p. فایل سبک خالی است زیرا در حال حاضر نیازی به یک ظاهر طراحی نداریم. اما وقتی پروژه را اجرا می کنیم، چیزی را مشاهده نمی کنیم که جزء جدید در مرورگر نمایش داده شود. اکنون اجازه دهید چیزی اضافه کنیم و بعداً همان را می توان در مرورگر مشاهده کرد.

انتخاب کننده، یعنی app-new-cmp باید به صورت زیر در فایل app.component .html اضافه شود-

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<app-new-cmp></app-new-cmp>

 

هنگامی که تگ <app-new-cmp> </app-new-cmp> اضافه می شود ، همه آنچه در فایل .html مولفه جدید ایجاد شده به همراه داده های مولفه اصلی در مرورگر نمایش داده می شود.

اجازه دهید فایل .html جزء جدید و فایل new-cmp.component.ts را ببینیم.

 

new-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

 

در کلاس ما یک متغیر به نام new component اضافه کرده ایم و مقدار “Entered in new component created” است.

متغیر فوق در فایل .new-cmp.component.html به صورت زیر محدود شده است-

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

 

اکنون از آنجا که ما انتخاب کننده <app-new-cmp> </app-new-cmp> را در برنامه گنجانده ایم. component .html که .html جزء اصلی است، محتوای موجود در فایل .html کامپوننت جدید (new-cmp.component.html) به شرح زیر در مرورگر نمایش داده می شود-

Using Selectors Browser Output

به طور مشابه  ما می توانیم اجزاء را ایجاد کرده و با استفاده از انتخابگر موجود در فایل app.component.html مطابق نیاز خود پیوند دهیم.

 

منبع.

 

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

  1. آموزش انگولار ۴
  2. بررسی اجمالی انگولار ۴
  3. آموزش تنظیمات محیط انگولار ۴
  4. آموزش راه اندازی پروژه در انگولار ۴
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه