آموزش مسیریابی در انگولار ۶

 آموزش مسیریابی در انگولار ۶

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مسیریابی در انگولار ۶ خواهیم پرداخت.

مسیریابی در اصل به معنای پیمایش بین صفحات است. شما سایت های زیادی را با لینک هایی که شما را به یک صفحه جدید هدایت می کنند دیده اید. این را می توان با استفاده از مسیریابی به دست آورد. در اینجا صفحاتی که به آنها اشاره می کنیم به صورت کامپوننت خواهند بود. ما قبلا نحوه ایجاد یک کامپوننت را دیده ایم. اجازه دهید اکنون یک کامپوننت ایجاد کنیم و نحوه استفاده از مسیریابی با آن را ببینیم.

در مولفه اصلی 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 { }

در اینجا RouterModule از angular/router وارد می شود. ماژول مطابق شکل زیر در واردات گنجانده شده است

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

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

اجازه دهید اکنون فایل ایجاد شده کامپوننت را ببینیم

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>

در کد بالا، تگ anchor link را ایجاد کرده ایم و routerLink را به عنوان “new-cmp” قرار داده ایم. این در app.module.ts به عنوان مسیر نامیده می شود.

هنگامی که کاربر بر روی مؤلفه جدید کلیک می کند، صفحه باید محتوا را نمایش دهد. برای این کار به تگ زیر نیاز داریم – <router-outlet> </router-outlet>.

تگ بالا تضمین می کند که محتوای new-cmp.component.html در صفحه نمایش داده می شود که کاربر بر روی مؤلفه جدید کلیک می کند.

حال بیایید ببینیم خروجی چگونه در مرورگر نمایش داده می شود.

هنگامی که کاربر بر روی مؤلفه جدید کلیک می کند، موارد زیر را در مرورگر مشاهده خواهید کرد.

آدرس اینترنتی حاوی http://localhost:4200/new-cmp است. در اینجا، new-cmp به url اصلی اضافه می‌شود، که مسیری است که در app.module.ts و پیوند روتر در app.component.html داده شده است.

هنگامی که کاربر بر روی مؤلفه جدید کلیک می کند، صفحه رفرش نمی شود و محتویات بدون بارگیری مجدد به کاربر نشان داده می شود. فقط یک قطعه خاص از کد سایت با کلیک مجدد بارگیری می شود. این ویژگی زمانی به ما کمک می کند که محتوای سنگینی در صفحه داشته باشیم و باید بر اساس تعامل کاربر بارگذاری شود. این ویژگی همچنین به دلیل بارگذاری مجدد صفحه، تجربه کاربری خوبی را ارائه می دهد.

منبع.

لیست جلسات قبل آموزش انگولار ۶

1. آموزش انگولار ۶
2. آموزش مقدمه انگولار ۶
3. آموزش راه اندازی محیط انگولار ۶
4. آموزش راه اندازی پروژه در انگولار ۶
5. آموزش کامپوننت ها در انگولار ۶
6. آموزش ماژول در انگولار ۶
7. آموزش اتصال داده در انگولار ۶
8. آموزش اتصال رویداد در انگولار ۶
9. آموزش تمپلیت ها در انگولار ۶
10. آموزش دستورالعمل ها در انگولار ۶
11. آموزش پایپ ها در انگولار ۶