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

ในการ redirect URL จาก main page ใน Angular เราสามารถใช้บริการ Router ของ Angular ได้

Router เป็นคลาสที่ช่วยให้เราสามารถจัดการเส้นทางของแอปพลิเคชัน Angular ได้ โดยเราสามารถใช้ navigate() method ของ Router เพื่อ redirect URL ได้

ตัวอย่างการ redirect URL จาก main page

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

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

  router: Router;

  constructor(private router: Router) {}

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

}

โค้ด HTML

<h1>Main Page</h1>
<a href="#">About</a>

Output

เมื่อเราคลิกลิงก์ “About” แอปพลิเคชันจะ redirect ไปยังเส้นทาง /about

วิธีอื่นในการ redirect URL จาก main page

นอกจากการใช้ navigate() method แล้ว เรายังสามารถใช้ RouterLink directive เพื่อ redirect URL ได้

RouterLink directive จะสร้างลิงก์ที่เมื่อคลิกแล้วแอปพลิเคชันจะ redirect ไปยังเส้นทางที่กำหนด

ตัวอย่างการ redirect URL จาก main page โดยใช้ RouterLink directive

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

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

  router: Router;

  constructor(private router: Router) {}

  ngOnInit() {
  }

}

โค้ด HTML

<h1>Main Page</h1>
<a [routerLink]="['/about']">About</a>

Output

เมื่อเราคลิกลิงก์ “About” แอปพลิเคชันจะ redirect ไปยังเส้นทาง /about

สรุป

การ redirect URL จาก main page ใน Angular สามารถทำได้หลายวิธี ขึ้นอยู่กับความต้องการและการใช้งานของแอปพลิเคชัน