Điều hướng trong ứng dụng Angular

Hướng dẫn này sẽ thêm điều hướng vào ứng dụng Angular cơ bản được xây dựng dựa trên bước đầu tiên của hướng dẫn Bắt đầu với ứng dụng Angular cơ bản.

Ở giai đoạn phát triển này, ứng dụng cửa hàng trực tuyến có danh mục sản phẩm cơ bản.

Trong các phần này, bạn sẽ thêm các tính năng sau vào ứng dụng:

• Nhập URL vào thanh địa chỉ để điều hướng đến trang sản phẩm tương ứng.
• Nhấp vào các liên kết trên trang để điều hướng trong ứng dụng SPA của bạn.
• Nhấp vào nút back và forward của trình duyệt để điều hướng lịch sử trình duyệt một cách trực quan.

Liên kết đường dẫn URL với một component

Ứng dụng đã sử dụng Angular Router để điều hướng đến ProductListComponent. Phần này hướng dẫn bạn cách định tuyến để hiển thị chi tiết từng sản phẩm.

1. Tạo một component mới cho chi tiết sản phẩm. Trong danh sách tệp, bấm chuột phải vào thư mục app, chọn Angular Generator và Component. Đặt tên cho component là product-details.

2. Trong file app.module.ts, thêm một định tuyến đến chi tiết sản phẩm, với giá trị tham số path là products/:productId và component là ProductDetailsComponent như sau.

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
    ])
  ],

3. Mở file product-list.component.html.

4. Sửa đổi liên kết tên sản phẩm để thêm directive routerLink với tham số là product.id như sau.

<div *ngFor="let product of products">

  <h3>
    <a 
Lorem ipsum dolor sit amet...
="product.name + ' details'" [routerLink]="['/products', product.id]">
      {{ product.name }}
    </a>
  </h3>

<!-- . . . -->

</div>

Directive RouterLink giúp bạn tùy chỉnh phần tử a. Trong trường hợp này, định tuyến hoặc URL chứa một đoạn cố định là /products. Phần cuối cùng của nó có thể thay đổi bằng cách chèn thuộc tính id của sản phẩm hiện tại. Ví dụ: URL cho sản phẩm có id là 1 ​​sẽ trông như sau: https://getting-started-myfork.stackblitz.io/products/1.

5. Kiểm tra bộ định tuyến hoạt động bằng cách nhấp vào tên sản phẩm. Ứng dụng sẽ hiển thị component ProductDetailsComponent và hiển thị thông điệp  “product-details works!”

Lưu ý rằng URL trong cửa sổ xem trước sẽ thay đổi. Phần cuối cùng của URL là products/# với # là id của sản phẩm bạn nhấp vào.

Xem chi tiết sản phẩm

Component ProductDetailsComponent hiển thị thông tin chi tiết của mỗi sản phẩm. Angular Router hiển thị các component dựa trên URL của trình duyệt và các tuyến đường đã được định nghĩa của bạn.

Trong phần này, bạn sẽ sử dụng Angular Router để kết hợp dữ liệu products và thông tin tuyến đường để hiển thị thông tin chi tiết cho từng sản phẩm.

1. Thêm các khai báo sau vào file product-details.component.ts.

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

import { Product, products } from '../products';

2. Định nghĩa thuộc tính product.

export class ProductDetailsComponent implements OnInit {
  product: Product|undefined;
  /* ... */
}

3. Chèn ActivatedRoute vào constructor() bằng cách thêm private route: ActivatedRoute dưới dạng một đối số trong dấu ngoặc đơn của hàm khởi tạo.

export class ProductDetailsComponent implements OnInit {
  product: Product|undefined;

  constructor(
    private route: ActivatedRoute,
  ) { }

}

ActivatedRoute là riêng cho từng component mà Angular Router tải. ActivatedRoute chứa thông tin về tuyến đường và các thông số của tuyến đường.

Bằng cách inject ActivatedRoute, bạn đang cấu hình component để sử dụng một dịch vụ. Bài viết Quản lý Dữ liệu sẽ tập trung vào chi tiết của các dịch vụ hơn.

4. Trong phương thức ngOnInit(), trích xuất productId từ các tham số tuyến đường và tìm sản phẩm tương ứng trong mảng products.

ngOnInit() {
  // First get the product id from the current route.
  const routeParams = this.route.snapshot.paramMap;
  const productIdFromRoute = Number(routeParams.get('productId'));

  // Find the product that correspond with the id provided in route.
  this.product = products.find(product => product.id === productIdFromRoute);
}

Các tham số của tuyến đường tương ứng với các biến path mà bạn định nghĩa trong định tuyến. Để truy cập các tham số tuyến đường, chúng tôi sử dụng route.snapshot, nó là ActivatedRouteSnapshot chứa thông tin về tuyến đường đang hoạt động tại thời điểm cụ thể đó.

URL phù hợp với tuyến đường cung cấp productId. Angular sử dụng productId để hiển thị thông tin chi tiết cho sản phẩm tương ứng.

5. Cập nhật template cho ProductDetailsComponent để hiển thị thông tin chi tiết sản phẩm với directive *ngIf. Nếu một sản phẩm tồn tại, thẻ <div> sẽ hiển thị cùng với tên, giá và mô tả của sản phẩm.

<h2>Product Details</h2>

<div *ngIf="product">
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>
</div>

Dòng <h4>{{ product.price | currency }}</h4> sử dụng pipe currency để chuyển đổi giá trị thuộc tính product.price từ một số thành một chuỗi định dạng tiền tệ. Pipe là một cách bạn có thể chuyển đổi dữ liệu trong template HTML của mình. Để biết thêm thông tin về pipe Angular, hãy xem Pipes.

Khi người dùng nhấp vào tên sản phẩm trong danh sách sản phẩm, bộ định tuyến sẽ điều hướng họ đến URL của sản phẩm, component ProductDetailsComponent sẽ hiển thị thông tin chi tiết sản phẩm.

Để biết thêm thông tin về Angular Router, hãy xem thêm Định tuyến và Điều hướng.

Tiếp theo là gì

Bạn đã cấu hình ứng dụng của mình để có thể xem chi tiết sản phẩm, mỗi sản phẩm có một URL riêng biệt.

Để tiếp tục khám phá Angular:

• Tiếp tục xem Quản lý dữ liệu để thêm tính năng giỏ hàng, quản lý dữ liệu giỏ hàng và truy xuất dữ liệu phí vận chuyển từ bên ngoài.