کامپوننت ها (Components) در انگولار ۶

بخش اصلی توسعه یک برنامه در انگولار ۶ با استفاده از کامپوننت ها (Components) انجام می شود. اساس کامپوننت ها کلاس هایی هستند که با فایل های html که در مرورگر نمایش داده می شوند، ارتباط برقرار می کنند. در زیر فایل های موجود در کامپوننت app را مشاهده می کنید:

component.css
component.html
component.spec.ts
component.ts
module.ts

همانطور که در بخش قبلی نیز گفته شد، فایل های فوق توسط 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 { }

بخش declarations شامل AppComponent است که قبلا import شده است و به عنوان کامپوننت والد (parent) شناخته می شود. شما می توانید با استفاده از CLI کامپوننت جدید ایجاد کنید. توجه داشته باشید که هر کامپوننتی که ایجاد می شود، به عنوان فرزند کامپوننت app محسوب می شود.

دستور زیر به منظور ایجاد یک کامپوننت جدید استفاده می شود (new-cmp نام کامپوننت را مشخص می کند):

ng generate component new-cmp

زمانی که دستور فوق را اجرا کنید، خروجی زیر را دریافت خواهید کرد:

CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)

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

new-cmp.component.css
new-cmp.component.html
new-cmp.component.spec.ts
new-cmp.component.ts

بعد از ایجاد شدن کامپوننت new-cmp، محتوای فایل 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() {}
}

اگر به کد فوق دقت کنید، یک کلاس با نام NewCmpComponent ایجاد شده است که OnInit را پیاده سازی می کند. همچنین شامل یک سازنده و متدی به نام ngOnInit است. متد ngOnInit زمانی که کلاس اجرا شود، به طور خودکار فراخوانی می شود.

نحوه کار برنامه

همانطور که در بالا نیز گفته شد، کامپوننت app که به صورت پیشفرض ایجاد شده است، به عنوان والد است و سایر کامپوننت های ایجاد شده به عنوان فرزند این کامپوننت هستند. اگر در مرورگر خود آدرس http://localhost:4200 را باز کنید، ابتدا فایل index.html که شامل کدهای زیر است اجرا می شود.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 6 Application</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>

این تگ توسط انگولار ایجاد شده است و به عنوان تگ ریشه (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 وارد (import) شده و به ماژول bootstrap که برنامه را لود می کند، ارسال می شود.

حال به محتوای فایل 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 که app.Component.ts را در خود نگه می دارد تعریف شده است. همان متغیر به bootstrap نیز داده می شود.

محتوای فایل 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 6 Project!';
}

angular core به کامپوننت اضافه شده و در متغیری به نام Component که در Declarator استفاده می شود، قرار گرفته است.

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

در بخش declaratory به selector، templeateUrl و styleUrl ارجاع داده می شود. selector تگی که در فایل index.html بود (همان app-root) را اعلان می کند، templeateUrl قالب کامپوننت و stylesUrl استایل های مربوط به این کامپوننت را مشخص می کند. همچنین کلاس AppComponent شامل یک متغیر به نام title است که در مرورگر نمایش داده می شود.

محتوای فایل 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 به همراه یک متغیر title که در داخل {{}} قرار دارد، است. زمانی که برنامع اجرا شود، مقدار متغیر title که در داخل کلاس AppComponent تعریف شده بود، با {{title}} جایگزین خواهد شد. به این کار بایند کردن (Binding) گفته می شود که در بخش های بعدی بررسی می کنیم. در ادامه محتوای فایل های کامپوننت new-cmp را بررسی می کنیم.

محتوای فایل 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 {
   constructor() { }
   ngOnInit() {}
}

در کد فوق دو import از angular core وجود دارد که اولی در declaratory استفاده می شود و دومی در کلاس NewCmpComponent پیاده سازی می شود. در declaratory یک selector با نام app-new-cmp، یک قالب، و یک فایل استایل مشخص شده است.

به طور پیشفرض فایل new-cmp.component.html شامل محتوای زیر است:

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

فایل new-cmp.component.css هیچ محتوایی ندارد.

زمانی که برنامه اجرا کنید، هیچ چیزی از کامپوننت new-cmp نمایش داده نخواهد شد. زیرا باید آن را به کامپوننت والد (app) اضافه کنید. مانند نمونه زیر:

<!--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>

حال زمانی که برنامه اجرا شود، محتوای فایل new-cmp.component.html به جای تگ <app-new-cmp></app-new-cmp> قرار می گیرد و در مرورگر نمایش داده می شود.

فایل new-cmp.component.ts باز کرده و مانند نمونه زیر یک متغییر با نام newcomponent و مقدار “Entered in new component created” به آن اضافه کنید:

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-cmp.component.html می توانید به آن متغیر دسترسی داشته باشید مانند نمونه زیر از آن استفاده کنید:

<p>
   {{newcomponent}}
</p>
<p>
   new-cmp works!
</p>

حال اگر برنامه را اجرا کنید خروجی زیر را مشاهده خواهید کرد:

نوشته کامپوننت ها (Components) در انگولار ۶ – آموزش Angular 6 اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

کامپوننت ها (Components) در انگولار ۶ – آموزش Angular 6