tiktok นับยอดวิวยังไง

Routes ใน Angular ช่วยให้เราสามารถกำหนดเส้นทางสำหรับแอปพลิเคชันของเราได้ เส้นทางช่วยให้เราสามารถกำหนดว่าแอปพลิเคชันจะแสดงอะไรเมื่อผู้ใช้คลิกลิงก์หรือป้อน URL

การกำหนดเส้นทาง

เพื่อกำหนดเส้นทาง เราจำเป็นต้องสร้าง object ของ type Route จากนั้นเราจึงสามารถเพิ่ม object นั้นลงใน array ของ routes ในไฟล์ app-routing.module.ts

ตัวอย่างการกำหนดเส้นทาง

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  declarations: [
    HomeComponent,
    AboutComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

ในตัวอย่างนี้ เรากำหนดเส้นทาง 2 เส้นทาง คือเส้นทางหลัก (path: ‘’) และเส้นทางเกี่ยวกับ (path: ‘about’)

การเข้าถึงองค์ประกอบบนเส้นทาง

เมื่อผู้ใช้คลิกลิงก์หรือป้อน URL เส้นทางจะกำหนดว่าแอปพลิเคชันจะแสดงอะไร เมื่อแอปพลิเคชันโหลดเส้นทางนั้น เราจะสามารถใช้ Router.navigate() เพื่อเข้าถึงองค์ประกอบบนเส้นทางได้

ตัวอย่างการเข้าถึงองค์ประกอบบนเส้นทาง

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {}

  public goToAbout() {
    this.router.navigate(['/about']);
  }

}

ในตัวอย่างนี้ เราสร้างฟังก์ชัน goToAbout() ที่จะใช้ Router.navigate() เพื่อเข้าถึงองค์ประกอบบนเส้นทาง /about

คุณสมบัติของเส้นทาง

เส้นทางมีคุณสมบัติหลายอย่างที่เราสามารถใช้เพื่อกำหนดค่าเส้นทางของเราได้ คุณสมบัติเหล่านี้ ได้แก่

• path: เส้นทางของลิงก์หรือ URL ที่จะใช้เพื่อเข้าถึงองค์ประกอบบนเส้นทาง
• component: ชื่อของคอมโพเนนต์ที่จะแสดงเมื่อผู้ใช้เข้าถึงเส้นทาง
• redirectTo: เส้นทางที่จะเปลี่ยนเส้นทางผู้ใช้เมื่อพวกเขาเข้าถึงเส้นทาง
• data: ข้อมูลที่จะส่งไปยังคอมโพเนนต์เมื่อผู้ใช้เข้าถึงเส้นทาง
• canActivate: ฟังก์ชันที่จะตรวจสอบว่าผู้ใช้สามารถเข้าถึงเส้นทางได้หรือไม่
• canActivateChild: ฟังก์ชันที่จะตรวจสอบว่าผู้ใช้สามารถเข้าถึงเส้นทางลูกได้หรือไม่
• canDeactivate: ฟังก์ชันที่จะตรวจสอบว่าผู้ใช้สามารถออกจากเส้นทางได้หรือไม่

สรุป

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