معرفی
در این بخش دوم از سری مقالات Angular 6 من، ما میخواهیم یاد بگیریم که چگونه کامپوننتها را ایجاد کنیم، یک کامپوننت را با استفاده از خروجی روتر نمایش دهیم، فهرست منو را روی ماوس نشان دهیم و یک مؤلفه را روی رویداد کلیک دکمه بارگذاری کنیم.
قبل از حرکت به محیط راه اندازی، لطفا مقاله قبلی من را بخوانید:
بخش 1 - نحوه ایجاد کامپوننت و نمایش یک جزء با استفاده از خروجی روتر.
مرحله 1
اکنون روی پوشه کامپوننت ها راست کلیک کرده و بر روی «Open in terminal» کلیک کنید. اکنون، ترمینال شما در Visual Studio Code باز می شود. من قصد دارم سه کامپوننت مختلف برای سه منوی مختلف ایجاد کنم، یعنی C#، ASP.NET MVC، تماس با ما مانند csharp، mvc، contactus.
برای ایجاد کامپوننت از دستور زیر استفاده کنید.
- ng g c Your-Component-Name
از دستور بالا، من در حال ایجاد کامپوننت هستم.
پس از ایجاد موفقیت آمیز، هر ورودی به فایل app.module.ts اضافه می شود. برای اطلاعات بیشتر به فایل زیر مراجعه کنید.
app.module.ts
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { HeaderComponent } from './Component/header/header.component';
- import { FooterComponent } from './Component/footer/footer.component';
- import { CsharpComponent } from './Component/csharp/csharp.component';
- import { MvcComponent } from './Component/mvc/mvc.component';
- import { ContactusComponent } from './Component/contactus/contactus.component';
- @NgModule({
- declarations: [
- AppComponent,
- HeaderComponent,
- FooterComponent,
- CsharpComponent,
- MvcComponent,
- ContactusComponent
- ],
- imports: [
- BrowserModule
- ],
- providers: [],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
گام 2
اکنون خط زیر را در app.module.ts اضافه کنید.
- import { RouterModule } from '@angular/router';
واردات روتر
Angular Router یک سرویس اختیاری است که نمای کامپوننت خاصی را برای URL معین ارائه می دهد. بخشی از Angular Core نیست. این در بسته کتابخانه خود، @angular/router است. آنچه را که نیاز دارید از آن وارد کنید همانطور که از هر بسته Angular دیگری انجام می دهید.