คู่มือฉบับสมบูรณ์สำหรับการกำหนดเส้นทางในเชิงมุม

ในกรณีที่คุณยังไม่ค่อยคุ้นเคยกับ Angular 7 เลย ฉันอยากจะนำเสนอกรอบงานส่วนหน้าที่น่าประทับใจนี้ให้คุณมากขึ้น ฉันจะแนะนำคุณเกี่ยวกับแอปสาธิตเชิงมุมที่แสดงแนวคิดต่างๆ ที่เกี่ยวข้องกับเราเตอร์ เช่น:

• เต้ารับเราเตอร์,
• เส้นทางและเส้นทาง
• การนำทาง

ฉันจะแสดงวิธีใช้ Angular CLI v7 เพื่อสร้างโครงการสาธิตที่เราจะใช้เราเตอร์ Angular เพื่อใช้การกำหนดเส้นทางและการนำทาง แต่ก่อนอื่น ให้ฉันแนะนำคุณให้รู้จักกับ Angular และศึกษาคุณลักษณะใหม่ที่สำคัญบางอย่างในเวอร์ชันล่าสุด

ขอแนะนำ Angular7

Angular เป็นหนึ่งในเฟรมเวิร์กส่วนหน้าที่เป็นที่นิยมมากที่สุดสำหรับการสร้างเว็บแอปพลิเคชันฝั่งไคลเอ็นต์สำหรับเว็บบนมือถือและเดสก์ท็อป เป็นไปตามสถาปัตยกรรมแบบส่วนประกอบโดยที่ส่วนประกอบแต่ละส่วนเป็นโค้ดที่แยกออกมาและนำกลับมาใช้ใหม่ได้ ซึ่งควบคุมส่วนหนึ่งของ UI ของแอป

องค์ประกอบใน Angular คือคลาส TypeScript ที่ตกแต่งด้วย @Component decorator มีเทมเพลตแนบและสไตล์ชีต CSS ที่สร้างมุมมองของคอมโพเนนต์

Angular 7 ซึ่งเป็นเวอร์ชันล่าสุดของ Angular เพิ่งเปิดตัวพร้อมฟีเจอร์ใหม่โดยเฉพาะในเครื่องมือและประสิทธิภาพของ CLI เช่น:

• พรอมต์ CLI: คำสั่งทั่วไปเช่น ng add และ ng new สามารถแจ้งให้ผู้ใช้เลือกฟังก์ชันที่จะเพิ่มลงในโปรเจ็กต์ เช่น รูปแบบการกำหนดเส้นทางและสไตล์ชีต เป็นต้น
  
• การเพิ่มการเลื่อนไปที่ Angular Material CDK (Component DevKit)
• เพิ่มการรองรับการลากและวางให้กับ Angular Material CDK
• โปรเจ็กต์ยังถูกตั้งค่าเริ่มต้นให้ใช้ Budget Bundles ซึ่งจะเตือนนักพัฒนาเมื่อแอพของพวกเขาผ่านขีดจำกัดขนาด ตามค่าเริ่มต้น ระบบจะส่งคำเตือนเมื่อขนาดมีมากกว่า 2MB และมีข้อผิดพลาดที่ 5MB คุณยังเปลี่ยนขีดจำกัดเหล่านี้ได้ในไฟล์ angular.json ฯลฯ
  

แนะนำเราเตอร์เชิงมุม

Angular Router เป็นเราเตอร์ JavaScript อันทรงพลังที่สร้างและดูแลโดยทีมหลักของ Angular ซึ่งสามารถติดตั้งได้จากแพ็คเกจ @angular/router มีไลบรารีการเราต์ติ้งที่สมบูรณ์พร้อมความเป็นไปได้ที่จะมีเต้ารับเราเตอร์หลายตัว กลยุทธ์การจับคู่พาธที่แตกต่างกัน เข้าถึงพารามิเตอร์เส้นทางได้ง่าย และตัวป้องกันเส้นทางเพื่อปกป้องส่วนประกอบจากการเข้าถึงโดยไม่ได้รับอนุญาต

เราเตอร์เชิงมุมเป็นส่วนหลักของแพลตฟอร์มเชิงมุม ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันหน้าเดียวที่มีหลายมุมมองและอนุญาตให้นำทางระหว่างมุมมองเหล่านี้

ตอนนี้เรามาดูแนวคิดของเราเตอร์ที่สำคัญในรายละเอียดเพิ่มเติมกัน

เราเตอร์-Outlet

Router-Outlet เป็นคำสั่งที่มีให้ในไลบรารีของเราเตอร์ที่เราเตอร์จะแทรกส่วนประกอบที่ได้รับการจับคู่ตาม URL ของเบราว์เซอร์ปัจจุบัน คุณสามารถเพิ่มหลายช่องทางในแอปพลิเคชัน Angular ของคุณ ซึ่งช่วยให้คุณใช้สถานการณ์การกำหนดเส้นทางขั้นสูงได้

 <router-outlet></router-outlet>

ส่วนประกอบใด ๆ ที่ตรงกับเราเตอร์จะแสดงผลเป็นพี่น้องของเต้ารับเราเตอร์

เส้นทางและเส้นทาง

เส้นทางคือคำจำกัดความ (อ็อบเจ็กต์) ที่ประกอบด้วยแอตทริบิวต์อย่างน้อยเส้นทางและส่วนประกอบ (หรือเส้นทางเปลี่ยนเส้นทางไปยัง) เส้นทางอ้างอิงถึงส่วนของ URL ที่กำหนดมุมมองเฉพาะที่ควรแสดง และส่วนประกอบอ้างอิงถึงองค์ประกอบเชิงมุมที่จำเป็นต้องเชื่อมโยงกับเส้นทาง ตามคำจำกัดความของเส้นทางที่เราให้ไว้ (ผ่าน RouterModule.forRoot(routes) แบบคงที่) เราเตอร์สามารถนำทางผู้ใช้ไปยังมุมมองเฉพาะได้

แต่ละ Route จะจับคู่ path URL กับส่วนประกอบ

เส้นทางสามารถว่างเปล่าได้ ซึ่งหมายถึงเส้นทางเริ่มต้นของแอปพลิเคชัน และโดยปกติแล้วจะเป็นจุดเริ่มต้นของแอปพลิเคชัน

เส้นทางสามารถใช้สตริง ตัวแทน ( ** ) เราเตอร์จะเลือกเส้นทางนี้หาก URL ที่ร้องขอไม่ตรงกับเส้นทางใดๆ สำหรับเส้นทางที่กำหนด สามารถใช้เพื่อแสดงมุมมอง "ไม่พบ" หรือเปลี่ยนเส้นทางไปยังมุมมองเฉพาะหากไม่พบรายการที่ตรงกัน

นี่คือตัวอย่างเส้นทาง:

 { path: 'contacts', component: ContactListComponent}

หากกำหนดเส้นทางนี้ให้กับการกำหนดค่าเราเตอร์ เราเตอร์จะแสดง ContactListComponent เมื่อ URL ของเบราว์เซอร์สำหรับเว็บแอปพลิเคชันกลายเป็น /contacts

กลยุทธ์การจับคู่เส้นทาง

เราเตอร์เชิงมุมมีกลยุทธ์การจับคู่เส้นทางที่แตกต่างกัน กลยุทธ์เริ่มต้นเป็นเพียงการตรวจสอบว่า URL ของเบราว์เซอร์ปัจจุบันนำหน้าด้วย เส้นทาง หรือไม่

ตัวอย่างเช่น เส้นทางก่อนหน้าของเรา:

 { path: 'contacts', component: ContactListComponent}

สามารถเขียนเป็น:

 { path: 'contacts',pathMatch: 'prefix', component: ContactListComponent}

แอตทริบิวต์ patchMath ระบุกลยุทธ์การจับคู่ ในกรณีนี้ คำนำหน้า ซึ่งเป็นค่าเริ่มต้น

กลยุทธ์การจับคู่ที่สอง เต็ม แล้ว เมื่อมีการระบุเส้นทาง เราเตอร์จะตรวจสอบว่าเส้นทางนั้น เท่ากับ เส้นทางของ URL ของเบราว์เซอร์ปัจจุบันหรือไม่:

 { path: 'contacts',pathMatch: 'full', component: ContactListComponent}

เส้นทาง Params

การสร้างเส้นทางด้วยพารามิเตอร์เป็นคุณสมบัติทั่วไปในเว็บแอป Angular Router ช่วยให้คุณเข้าถึงพารามิเตอร์ได้หลายวิธี:

• ใช้บริการ ActivatedRoute
• การใช้ ParamMap ที่สังเกตได้ซึ่งเริ่มต้นด้วย v4.0

คุณสามารถสร้างพารามิเตอร์เส้นทางโดยใช้ไวยากรณ์ โคลอน นี่คือตัวอย่างเส้นทางที่มีพารามิเตอร์ id :

 { path: 'contacts/:id', component: ContactDetailComponent}

ยามเส้นทาง

ตัวป้องกันเส้นทางเป็นคุณลักษณะของ Angular Router ที่ช่วยให้นักพัฒนาสามารถเรียกใช้ตรรกะบางอย่างเมื่อมีการร้องขอเส้นทาง และตามตรรกะนั้น จะอนุญาตหรือปฏิเสธการเข้าถึงของผู้ใช้ในเส้นทาง มักใช้เพื่อตรวจสอบว่าผู้ใช้เข้าสู่ระบบและมีสิทธิ์ก่อนเข้าถึงหน้าเว็บหรือไม่

คุณสามารถเพิ่มตัวป้องกันเส้นทางได้โดยใช้อินเทอร์เฟซ CanActivate ที่มีให้จากแพ็คเกจ @angular/router และขยาย canActivate() ซึ่งมีตรรกะในการอนุญาตหรือปฏิเสธการเข้าถึงเส้นทาง ตัวอย่างเช่น ยามต่อไปนี้จะอนุญาตให้เข้าถึงเส้นทางเสมอ:

 class MyGuard implements CanActivate { canActivate() { return true; } }

จากนั้นคุณสามารถปกป้องเส้นทางด้วยยามโดยใช้แอตทริบิวต์ canActivate :

 { path: 'contacts/:id, canActivate:[MyGuard], component: ContactDetailComponent}

คำสั่งการนำทาง

เราเตอร์เชิงมุมให้คำสั่ง routerLink เพื่อสร้างลิงก์การนำทาง คำสั่งนี้ใช้เส้นทางที่เกี่ยวข้องกับส่วนประกอบเพื่อนำทางไป ตัวอย่างเช่น:

 <a [routerLink]="'/contacts'">Contacts</a>

ทางออกหลายช่องทางและเส้นทางเสริม

Angular Router รองรับหลายช่องทางในแอพพลิเคชั่นเดียวกัน

คอมโพเนนต์มีเส้นทางหลักที่เชื่อมโยงหนึ่งเส้นทาง และสามารถมีเส้นทางเสริมได้ เส้นทางเสริมช่วยให้นักพัฒนาสามารถนำทางได้หลายเส้นทางพร้อมกัน

ในการสร้างเส้นทางเสริม คุณจะต้องมีเต้ารับเราเตอร์ที่มีชื่อซึ่งส่วนประกอบที่เกี่ยวข้องกับเส้นทางเสริมจะปรากฏขึ้น

 <router-outlet></router-outlet> <router-outlet name="outlet1"></router-outlet>

• เต้าเสียบที่ไม่มีชื่อคือเต้าเสียบหลัก
• ร้านค้าทั้งหมดควรมีชื่อ ยกเว้นร้านหลัก

จากนั้นคุณสามารถระบุร้านที่คุณต้องการแสดงส่วนประกอบของคุณโดยใช้แอตทริบิวต์เต้าเสียบ:

 { path: "contacts", component: ContactListComponent, outlet: "outlet1" }

การสร้างโครงการสาธิต Angular 7

ในส่วนนี้ เราจะมาดูตัวอย่างการใช้งานจริงของวิธีการตั้งค่าและทำงานกับ Angular Router คุณสามารถดูการสาธิตสดที่เราจะสร้างและที่เก็บ GitHub สำหรับโครงการ

การติดตั้ง Angular CLI v7

Angular CLI ต้องการ Node 8.9+ กับ NPM 5.5.1+ คุณต้องตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งข้อกำหนดเหล่านี้ไว้ในระบบของคุณ จากนั้นเรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Angular CLI เวอร์ชันล่าสุด:

 $ npm install -g @angular/cli

สิ่งนี้จะติดตั้ง Angular CLI ทั่วโลก

หมายเหตุ : คุณอาจต้องการใช้ sudo เพื่อติดตั้งแพ็คเกจทั่วโลก ขึ้นอยู่กับการกำหนดค่า npm ของคุณ

การสร้างโปรเจ็กต์ Angular 7

การสร้างโครงการใหม่ทำได้เพียงคำสั่งเดียว คุณเพียงแค่เรียกใช้คำสั่งต่อไปนี้:

 $ ng new angular7-router-demo

CLI จะถามคุณว่าคุณต้องการเพิ่มการกำหนดเส้นทางหรือไม่ (ประเภท N สำหรับ No เพราะเราจะดูว่าเราจะเพิ่มการกำหนดเส้นทางด้วยตนเองได้อย่างไร) และคุณต้องการใช้รูปแบบชีตรูปแบบใด เลือก CSS ตัวเลือกแรก จากนั้นกด Enter CLI จะสร้างโครงสร้างโฟลเดอร์พร้อมไฟล์ที่จำเป็นและติดตั้งการพึ่งพาที่จำเป็นของโปรเจ็กต์

การสร้างบริการแบ็คเอนด์ปลอม

เนื่องจากเราไม่มีแบ็กเอนด์ที่แท้จริงให้โต้ตอบด้วย เราจะสร้างแบ็กเอนด์ปลอมโดยใช้ไลบรารี angular-in-memory-web-api ซึ่งเป็นเว็บ API ในหน่วยความจำสำหรับการสาธิตเชิงมุมและการทดสอบที่ จำลองการดำเนินการ CRUD ผ่าน REST API

ทำงานโดยสกัดกั้นคำขอ HttpClient ที่ส่งไปยังเซิร์ฟเวอร์ระยะไกลและเปลี่ยนเส้นทางไปยังที่เก็บข้อมูลในหน่วยความจำในเครื่องที่เราจำเป็นต้องสร้าง

ในการสร้างแบ็กเอนด์ปลอม เราต้องทำตามขั้นตอนต่อไปนี้:

1. ขั้นแรก เราติดตั้งโมดูล angular-in-memory-web-api
2. ต่อไป เราสร้างบริการที่ส่งคืนข้อมูลปลอม
3. สุดท้าย กำหนดค่าแอปพลิเคชันให้ใช้แบ็กเอนด์ปลอม

ในเทอร์มินัลของคุณ ให้รันคำสั่งต่อไปนี้เพื่อติดตั้งโมดูล angular-in-memory-web-api จาก npm:

 $ npm install --save angular-in-memory-web-api

ถัดไป สร้างบริการแบ็คเอนด์โดยใช้:

 $ ng gs backend

เปิดไฟล์ src/app/backend.service.ts และนำเข้า InMemoryDbService จากโมดูล angular-in-memory-web-api :

 import {InMemoryDbService} from 'angular-in-memory-web-api'

คลาสบริการจำเป็นต้องใช้ InMemoryDbService แล้วแทนที่ createDb() :

 @Injectable({ providedIn: 'root' }) export class BackendService implements InMemoryDbService{ constructor() { } createDb(){ let contacts = [ { id: 1, name: 'Contact 1', email: '[email protected]' }, { id: 2, name: 'Contact 2', email: '[email protected]' }, { id: 3, name: 'Contact 3', email: '[email protected]' }, { id: 4, name: 'Contact 4', email: '[email protected]' } ]; return {contacts}; } }

เราเพียงแค่สร้างอาร์เรย์ของผู้ติดต่อและส่งคืน ผู้ติดต่อแต่ละคนควรมีรหัส

สุดท้าย เราเพียงแค่ต้องนำเข้า InMemoryWebApiModule ลงในไฟล์ app.module.ts และให้บริการแบ็คเอนด์ปลอมของเรา

 import { InMemoryWebApiModule } from “angular-in-memory-web-api”; import { BackendService } from “./backend.service”; /* ... */ @NgModule({ declarations: [ /*...*/ ], imports: [ /*...*/ InMemoryWebApiModule.forRoot(BackendService) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

ถัดไปสร้าง ContactService ซึ่งห่อหุ้มรหัสสำหรับการทำงานกับผู้ติดต่อ:

 $ ng gs contact

เปิดไฟล์ src/app/contact.service.ts และอัปเดตให้คล้ายกับรหัสต่อไปนี้:

 import { Injectable } from '@angular/core'; import { HttpClient } from “@angular/common/http”; @Injectable({ providedIn: 'root' }) export class ContactService { API_URL: string = "/api/"; constructor(private http: HttpClient) { } getContacts(){ return this.http.get(this.API_URL + 'contacts') } getContact(contactId){ return this.http.get(`${this.API_URL + 'contacts'}/${contactId}`) } }

เราได้เพิ่มสองวิธี:

• getContacts()
  เพื่อรับการติดต่อทั้งหมด
• getContact()
  เพื่อรับการติดต่อทาง id

คุณสามารถตั้งค่า API_URL เป็น URL ใดก็ได้ เนื่องจากเราจะไม่ใช้แบ็กเอนด์จริง คำขอทั้งหมดจะถูกสกัดกั้นและส่งไปยังส่วนแบ็คเอนด์ในหน่วยความจำ

การสร้างส่วนประกอบเชิงมุมของเรา

ก่อนที่เราจะได้เห็นวิธีการใช้คุณลักษณะต่างๆ ของเราเตอร์ เรามาสร้างส่วนประกอบต่างๆ ในโครงการของเราก่อน

ตรงไปที่เทอร์มินัลของคุณและเรียกใช้คำสั่งต่อไปนี้:

 $ ng gc contact-list $ ng gc contact-detail

การดำเนินการนี้จะสร้างส่วนประกอบ ContactListComponent และ ContactDetailComponent สองรายการ และเพิ่มลงในโมดูลแอปหลัก

การตั้งค่าการกำหนดเส้นทาง

ในกรณีส่วนใหญ่ คุณจะใช้ Angular CLI เพื่อสร้างโปรเจ็กต์ด้วยการตั้งค่าเราต์ติ้ง แต่ในกรณีนี้ เราจะเพิ่มด้วยตนเอง เพื่อให้เราเข้าใจมากขึ้นว่าการกำหนดเส้นทางทำงานอย่างไรใน Angular

การเพิ่มโมดูลการกำหนดเส้นทาง

เราจำเป็นต้องเพิ่ม AppRoutingModule ซึ่งจะมีเส้นทางแอปพลิเคชันของเราและเต้ารับเราเตอร์ที่ Angular จะแทรกองค์ประกอบที่ตรงกันในปัจจุบันขึ้นอยู่กับ URL ปัจจุบันของเบราว์เซอร์

เราจะเห็น:

• วิธีสร้าง Angular Module สำหรับกำหนดเส้นทางและนำเข้า
• วิธีเพิ่มเส้นทางไปยังส่วนประกอบต่างๆ
• วิธีเพิ่มเต้ารับเราเตอร์

ขั้นแรก เริ่มต้นด้วยการสร้างโมดูลการกำหนดเส้นทางในไฟล์ app-routing.module.ts ภายใน src/app สร้างไฟล์โดยใช้:

 $ cd angular7-router-demo/src/app $ touch app-routing.module.ts

เปิดไฟล์และเพิ่มรหัสต่อไปนี้:

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

เราเริ่มต้นด้วยการนำเข้า NgModule จากแพ็คเกจ @angular/core ซึ่งเป็นมัณฑนากร TypeScript ที่ใช้สร้างโมดูลเชิงมุม

นอกจากนี้เรายังนำเข้า RouterModule และ Routes จากแพ็คเกจ @angular/router RouterModule จัดเตรียมวิธีการแบบคงที่เช่น RouterModule.forRoot() สำหรับส่งอ็อบเจ็กต์การกำหนดค่าไปยังเราเตอร์

ต่อไป เรากำหนดอาร์เรย์ routes คงที่ของประเภท Routes ซึ่งจะใช้เพื่อเก็บข้อมูลสำหรับแต่ละเส้นทาง

สุดท้าย เราสร้างและส่งออกโมดูลที่เรียกว่า AppRoutingModule (คุณสามารถเรียกมันว่าอะไรก็ได้ที่คุณต้องการ) ซึ่งเป็นคลาส TypeScript ที่ตกแต่งด้วยมัณฑนากร @NgModule ที่ใช้วัตถุข้อมูลเมตา ในแอตทริบิวต์ imports ของวัตถุนี้ เราเรียก RouterModule.forRoot(routes) แบบคงที่โดยใช้อาร์เรย์เส้นทางเป็นพารามิเตอร์ ในอาร์เรย์การ exports เราเพิ่ม RouterModule

การนำเข้าโมดูลการกำหนดเส้นทาง

ต่อไป เราต้องนำเข้าการกำหนดเส้นทางโมดูลนี้ไปยังโมดูลแอปหลักที่อยู่ในไฟล์ src/app/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'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

เรานำเข้า AppRoutingModule จาก ./app-routing.module และเราเพิ่มลงในอาร์เรย์ imports ของโมดูลหลัก

การเพิ่ม Outlet เราเตอร์

สุดท้ายเราต้องเพิ่มเต้ารับเราเตอร์ เปิดไฟล์ src/app/app.component.html ซึ่งมีเทมเพลตแอปหลักและเพิ่มองค์ประกอบ <router-outlet> :

 <router-outlet></router-outlet>

นี่คือจุดที่ Angular Router จะแสดงส่วนประกอบที่สอดคล้องกับเส้นทางของเบราว์เซอร์ปัจจุบัน

นั่นคือขั้นตอนทั้งหมดที่เราต้องปฏิบัติตามเพื่อตั้งค่าการกำหนดเส้นทางด้วยตนเองภายในโปรเจ็กต์ Angular

การสร้างเส้นทาง

ตอนนี้ มาเพิ่มเส้นทางไปยังสององค์ประกอบของเรา เปิดไฟล์ src/app/app-routing.module.ts และเพิ่มเส้นทางต่อไปนี้ในอาร์เรย์ routes :

 const routes: Routes = [ {path: 'contacts' , component: ContactListComponent}, {path: 'contact/:id' , component: ContactDetailComponent} ];

ตรวจสอบให้แน่ใจว่าได้นำเข้าส่วนประกอบทั้งสองในโมดูลการกำหนดเส้นทาง:

 import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactDetailComponent } from './contact-detail/contact-detail.component';

ตอนนี้เราสามารถเข้าถึงทั้งสององค์ประกอบจากเส้นทาง /contacts และ contact/:id

การเพิ่มลิงค์การนำทาง

ต่อไป ให้เพิ่มลิงก์การนำทางไปยังเทมเพลตแอปของเราโดยใช้คำสั่ง routerLink เปิด src/app/app.component.html และเพิ่มรหัสต่อไปนี้ที่ด้านบนของเต้ารับเราเตอร์:

 <h2><a [routerLink] = "'/contacts'">Contacts</a></h2>

ต่อไปเราต้องแสดงรายการผู้ติดต่อใน ContactListComponent เปิด src/app/contact-list.component.ts จากนั้นเพิ่มรหัสต่อไปนี้:

 import { Component, OnInit } from '@angular/core'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts: any[] = []; constructor(private contactService: ContactService) { } ngOnInit() { this.contactService.getContacts().subscribe((data : any[])=>{ console.log(data); this.contacts = data; }) } }

เราสร้างอาร์เรย์ผู้ contacts เพื่อเก็บผู้ติดต่อ ต่อไป เราฉีด ContactService และเราเรียก getContacts() ของอินสแตนซ์ (ในเหตุการณ์วงจรชีวิต ngOnInit ) เพื่อรับผู้ติดต่อและกำหนดให้กับอาร์เรย์ผู้ contacts

ถัดไป เปิดไฟล์ src/app/contact-list/contact-list.component.html และเพิ่ม:

 <table> <tr> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr *ngFor="let contact of contacts" > <td>{{ contact.name }}</td> <td>{{ contact.email }}</td> <td> <a [routerLink]="['/contact', contact.id]">Go to details</a> </td> </tr> </table>

เราวนผ่านผู้ติดต่อและแสดงชื่อและอีเมลของผู้ติดต่อแต่ละราย นอกจากนี้เรายังสร้างลิงก์ไปยังองค์ประกอบรายละเอียดของผู้ติดต่อแต่ละรายโดยใช้คำสั่ง routerLink

นี่คือภาพหน้าจอของส่วนประกอบ:

เมื่อเราคลิกลิงก์ ไปที่รายละเอียด ระบบจะนำเราไปยัง ContactDetailsComponent เส้นทางมีพารามิเตอร์ id มาดูกันว่าเราสามารถเข้าถึงได้จากองค์ประกอบของเราอย่างไร

เปิดไฟล์ src/app/contact-detail/contact-detail.component.ts และเปลี่ยนรหัสให้คล้ายกับรหัสต่อไปนี้:

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-detail', templateUrl: './contact-detail.component.html', styleUrls: ['./contact-detail.component.css'] }) export class ContactDetailComponent implements OnInit { contact: any; constructor(private contactService: ContactService, private route: ActivatedRoute) { } ngOnInit() { this.route.paramMap.subscribe(params => { console.log(params.get('id')) this.contactService.getContact(params.get('id')).subscribe(c =>{ console.log(c); this.contact = c; }) }); } }

เราฉีด ContactService และ ActivatedRoute ลงในส่วนประกอบ ในเหตุการณ์วงจรชีวิต ngOnInit() เราดึงพารามิเตอร์ id ที่จะถูกส่งผ่านจากเส้นทาง และใช้เพื่อรับรายละเอียดของผู้ติดต่อที่เรากำหนดให้กับวัตถุ contact

เปิดไฟล์ src/app/contact-detail/contact-detail.component.html และเพิ่ม:

 <h1> Contact # {{contact.id}}</h1> <p> Name: {{contact.name}} </p> <p> Email: {{contact.email}} </p> 

เมื่อเราเยี่ยมชมแอปพลิเคชันของเราครั้งแรกจาก 127.0.0.1:4200/ เต้าเสียบไม่แสดงส่วนประกอบใด ๆ ดังนั้นให้เปลี่ยนเส้นทางเส้นทางว่างไปยังเส้นทางผู้ contacts โดยเพิ่มเส้นทางต่อไปนี้ไปยังอาร์เรย์เส้นทาง:

 {path: '', pathMatch: 'full', redirectTo: 'contacts'}

เราต้องการจับคู่เส้นทางที่ว่างเปล่า นั่นคือเหตุผลที่เราระบุกลยุทธ์การจับคู่ แบบเต็ม

บทสรุป

ในบทช่วยสอนนี้ เราได้เห็นวิธีการใช้ Angular Router เพื่อเพิ่มการกำหนดเส้นทางและการนำทางในแอปพลิเคชันของเรา เราได้เห็นแนวคิดที่แตกต่างกัน เช่น เต้ารับเราเตอร์ เส้นทาง และเส้นทาง และเราได้สร้างการสาธิตเพื่อแสดงแนวคิดที่แตกต่างกันในทางปฏิบัติ คุณสามารถเข้าถึงรหัสจากที่เก็บนี้