انشاء المكون component والتعرف على محتواه في #angular

لانشاء مكون جديد ينبغي فتح نافذة سطر الأوامر الـ command prompt أو الـ terminal  ونتموضع بداخل مجلد المشروع عبر التعليمة cd 

ثم ننشئ مكون جديد بواسطة هذا الأمر

ng generate component componentname  //  هو الاسم الذي نختاره للمكون componentname

يمكن اختصار الأمر بهذا الشكل أيضا

ng g c componentname

بهذا سيقوم angular  بإنشاء مجلد جديد باسم myFolder  ويضع بداخله ملفات المكون 

├── /مجلد المشروع
    └── /src
        └── /componentname
            └── 
                ├── componentname.component.html
                ├── componentname.component.ts
                ├── componentname.component.scss
                ├── componentname.component.spec.ts

من أجل انشاء المكون داخل مجلد نضع اولا اسم المجلد بعد اسم المكون بهذا الشكل  folder/componentname لتكون التعليمة بهذا الشكل ng generate component myFolder/componentname

مكونات الـ component ستكون بهذا الشكل

componentname.component.ts the component class file

componentname.component.css for styling the component

componentname.component.html component html

componentname.component.spec.ts tests for the component

ملف componentname.component.spec.ts لا نحتاجه  الان لانه ملف اختبار

بعد الدخول الى ملف componentname.component.ts سنجد المحتوى التالي 

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

@Component({
  selector: 'app-componentname',
  templateUrl: './componentname.component.html',
  styleUrls: ['./componentname.component.css']
})
export class ComponentnameComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

لنتعرف الان على مكونات  هذا الـ component الذي قمنا بانشاءه

لنرى اول سطر

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

ترجمة هدا السطر هي ان المكون  يقوم بطلب ملفين عن طريق الأمر import  وهما :

1. ملف تعريف ان هذا الكلاس هو من نوع component

2. اما الملف الثاني فهو عبارة عن واجهة تسمى OnInit

export class ComponentnameComponent implements OnInit

أول ما نلاحظه هو  أن المكون الخاص بنا  يعتمد على واجهة  OnInit  

طبعا الواجهات Interfaces  لمن لايعرفها هي تقنية  تستعمل في البرمجة الكائنية .يجب الاطلاع على درس البرمجة الكائنية بالموقع لمن لايعرف هذه الفلسفة البرمجية

هذه الواجهة تحتوي على دالة  تسمى  ngOnInit  هذه الدالة يتم تنفيذها في المكون مرة واحدة عند بداية الإقلاع

  ngOnInit() {
   // هنا نضع كود معين نريد تنفيذه عند اقلاع المكون مثل جلب بيانات من السرفر..
  }

 الـ metadata 

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

سبق وتعرفنا على الـ metadata بالمواضيع السابقة ..باختصار هي الوسيط الذي يربط مكونات الـ component  ..

بعد ان تعرفنا على محتوى المكون الجديد الذي قمنا بانشاءه   الان سيقوم  angular  بنعريف هذا  المكون الذي قمنا بانشاءه داخل app.module.ts  

لنلقي نظرة سريعة على ملف 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 { ComponentnameComponent } from './componentname/componentname.component';

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

لاحظ انه الموديل قام باستيراد المكون الذي أنشأناه

import { ComponentnameComponent } from './componentname/componentname.component';

 وقام بتعريفه بمصفوفة الـ declarations كما نلاحظ  بالشكل التالي

  declarations: [
    AppComponent,
    ComponentnameComponent // هذا هو المكون الذي  أنشأناه
  ],

بهذه الخطوات اصبح angular قادر على التعرف على المكون الجديد وتنفيذه .

قبل ان نتعرف على كيفية تنفيذ الـ component علينا اولا ان نطلع على مكونات هذا الـmodule حتى لا نتشتت او نجد لبس في اي نقطة  وبعد التعرف على مكونات الموديلات سوف نعود للمكون ونشرح كيفية تنفيذه 

إذا قمت بإنشاء المكون يدويا عن طريق الاعتماد على النسخ واللصق فعليك بتعريفه داخل الـ module مثلما رأينا بهدا الدرس أما في حال أنشأناه كما في هذا الدرس عن طريق الأوامر بالـ commande line  فسيتم تضمينه بشكل الي بداخل الـ module