مسیریابی (Routing) در انگولار ۶

به طور کلی منظور از مسیریابی (Routing) در انگولار، جا به جا شدن بین صفحات مختلف است. تا به حال سایت های زیادی را دیده اید که شما را با یک لینک به صفحه دیگر منتقل می کنند. همان کار را می توان با استفاده از مسیریابی انجام داد. همانطور که در بخش های قبلی توضیح داده شد، یک کامپوننت جدید ایجاد کنید تا نحوه استفاده از مسیریابی را بررسی کنیم.

در فایل app.module.ts مانند نمونه زیر ماژول مربوط به مسیریابی را اضافه کنید:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

در کد فوق ما ماژول مربوط به مسیریابی را از angular/router وارد کرده و در RouterModule قرار داده ایم. سپس آن را به صورت زیر به بخش imports اضافه کرده ایم:

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule به forRoot اشاره دارد که یک ورودی به صورت آرایه می گیرد، که به نوبه خود شیء مسیر و مولفه را دارد. مسیر نام روتر است و جزء نام کلاس است، به عنوان مثال مولفه ایجاد شده است.

RouterModule به forRoot اشاره دارد که یک ورودی از نوع آرایه می گیرد و این آرایه خودش یک شیء از مسیر و کامپوننت را به عنوان ورودی می گیرد. مقداری که به path داده می شود، نام router را مشخص می کند و مقداری هم که به component داده می شود، کلاس کامپوننت را مشخص می کند.

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

محتوای فایل New-cmp.component.html:

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

حال برای آن که محتوای فایل html در هنگام کلیک بر روی لینک نمایش داده شود، فایل app.component.html را به صورت زیر تغییر دهید:

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>

در کد فوق ما یک لینک با صفت routerLink و مقدار “new-cmp” اضافه کردیم که به مسیر تعریف شده در فایل app.module.ts اشاره می کند. همانطور که در کد بالا مشاهده می کنید، تگ <router-outlet> </router-outlet> نیز اضافه شده است. این تگ تضمین می کند زمانی که کاربر بر روی لینک کلیک کند، محتوای فایل new-cmp.component.html نمایش داده شود.

خروجی برنامه:

بعد از کلیک کردن بر روی لینک:

حال اگر به آدرس برنامه در آدرس بار مرورگر توجه کنید، مشاهده می کنید که new-cmp نیز به انتهای آن اضافه شده است. این همان مسیری است که در فایل app.module.ts به عنوان path برای router مشخص کردیم. زمانی که کاربر بر روی لینک کلیک می کند، صفحه مرورگر refresh نمی شود و محتوا بدون هیچ گونه reload کردن نمایش داده می شود.

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