کامپوننت ها (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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

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

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

ng g component new-cmp

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

C:\projectA7\angular7-app>ng g 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 (477 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 { AppRoutingModule } from './app-routing.module';
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,
      AppRoutingModule
   ],
   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', // selector to be used inside .html file.
   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 که شامل کدهای زیر است اجرا می شود.

<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular7App</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).catch(err => console.error(err));

AppModule از کامپوننت app وارد (import) شده و به ماژول bootstrap که برنامه را لود می کند، ارسال می شود.

محتوای فایل app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule '
   ],
   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 7';
}

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

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

در ادامه دلیل نمایش داده نشدن محتوای کامپوننت جدید را بررسی میکنیم.

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

همانطور که مشاهده می کنید، selector این کامپوننت با نام app-new-cmp تنظیم شده است.

برای اینکه محتوای کامپوننت جدید در برنامه نمایش داده شود باید تگ <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>

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

در ادامه جزئیات بیشتری را به کامپوننت 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 {
   newcomponent = "Entered in new component created";
   constructor() { }
   ngOnInit() { }
}

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

حال در بخش html آن متغیر را فراخوانی میکنیم:

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

همچنین یک استایل ساده نیز برای آن مشخص می کنیم:

p {
   color: blue;
   font-size: 25px;
}

خروجی پروژه بعد از اجرا:

به طور مشابه ما می توانیم کامپوننت های دیگری نیز ایجاد کنیم و در صورت نیاز از آن ها در کامپوننت اصلی استفاده کنیم.

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

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