مقدمه
ما قبلاً نحوه ایجاد اولین برنامه Angular خود را در مقاله قبلی خود دیدیم، یعنی شروع با Angular 5 . حال در این مقاله می آموزیم که کامپوننت چیست و چگونه می توان کامپوننت ایجاد کرد.
یک جزء چیست؟
- هر برنامه Angular حداقل یک جزء دارد که برای نمایش داده ها در View استفاده می شود.
- کامپوننت شامل ابرداده مانند افکت انیمیشن، سبک برای اعمال اجزا، الگو، ورودی-خروجی، واردات و غیره است.
- اینها بلوک های اصلی یک برنامه Angular هستند.
- وقتی هر کامپوننتی را ایجاد می کنیم، در NgModule تعریف می شود.
- فرض کنید قصد دارید یک برنامه کاربردی ساده ایجاد کنید که شامل صفحه اصلی، آرم - لیست منو - فوتر و غیره است. صفحه وبلاگ ها حاوی لیست وبلاگ ها، اطلاعات تماس درباره نویسنده و غیره است. بنابراین ما قصد داریم این اجزا را ایجاد کنیم.
مرحله 1
برای ایجاد کامپوننت، به src/app بروید تا ساختار پوشه را ببینید. حالا همانطور که در تصویر زیر نشان داده شده است، با کلیک روی ماوس، cmd را تایپ کنید و سپس کلید Enter را فشار دهید تا خط فرمان باز شود.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/creating-components-in-angular-5/Images/cmd.jpg)
برای ایجاد اجزای مختلف از سینتکس زیر استفاده کنید.
- ng g c YourComponentName
این کامپوننت را ایجاد می کند. من قصد دارم سه مؤلفه مختلف مانند خانه، وبلاگ و تماس ایجاد کنم.
در کامپوننت خانه، من قصد دارم مقداری کد HTML بنویسم که حاوی آرم و فهرست منو است.
در وبلاگ و تماس، من قصد دارم فقط یک پیام خوشامدگویی به صفحه وبلاگ بنویسم.
مرحله 2
در home.component.html، کد زیر را بنویسید.
در home.component.html، کد زیر را بنویسید.
- <div style="text-align:Left">
- <img width="200" alt="CodderFunda Logo" src="http://coderfunda.com/wp-content/uploads/2018/02/logo2.png">
- </div>
- <h4>Here are sample menu items </h4>
- <ul>
- <li><a routerLink="#home">Home</a></li>
- <li><a routerLink="/blogs">Latest Blogs</a></li>
- <li><a routerLink="/events">Events</a></li>
- <li><a routerLink="/contact">Contact</a></li>
- </ul>
دستورالعمل های routerLink روی تگ های لنگر به روتر کنترل آن عناصر را می دهد. مسیرهای ناوبری ثابت هستند.
مرحله 3
در app.component.html، انتخابگر خود را بنویسید و ما از مسیریابی مانند زیر استفاده می کنیم.
- <app-home></app-home>
- <router-outlet></router-outlet>
<router-outlet> برای تعیین اینکه کدام جزء باید بارگذاری شود استفاده می شود. فرض کنید می خواهید به URL localhost:1234/blogs دسترسی پیدا کنید، سپس روتر آن URL را با مسیر مسیر /blogs مطابقت می دهد و محتوا را از blogs.component.html به View نمایش می دهد.
مرحله 4
اکنون، شما باید اجزاء را در فایل app.module.ts وارد کنید، همانطور که در زیر نشان داده شده است. همچنین، ورودی هر مسیر نوار آدرس و مؤلفه ای را که باید در خروجی روتر رندر شود، مشخص کنید.
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { RouterModule } from '@angular/router';
- import { HomeComponent } from './Component/home/home.component';
- import { BlogsComponent } from './Component/blogs/blogs.component';
- import { enableProdMode } from '@angular/core';
- import { ContactComponent } from './Component/contact/contact.component';
- import { EventsComponent } from './Component/events/events.component';
- @NgModule({
- declarations: [
- AppComponent,
- HomeComponent,
- BlogsComponent,
- ContactComponent,
- EventsComponent
- ],
- imports: [
- BrowserModule,
- RouterModule.forRoot([
- { path: 'blogs', component: BlogsComponent },
- { path: 'contact', component: ContactComponent },
- { path: 'events', component: EventsComponent }
- ])
- ],
- providers: [],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
مرحله 5
حالا برنامه را با استفاده از دستور زیر اجرا کنید.
- ng serve -o
روی آیتم منو Latest Blogs کلیک کنید.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/creating-components-in-angular-5/Images/blog.jpg)
اکنون روی Contact کلیک کنید.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/creating-components-in-angular-5/Images/contact.jpg)