Giới thiệu

Bạn có bao giờ thắc mắc liệu có thể sử dụng jump links trong Angular không? Trong HTML thông thường, bạn chỉ cần sử dụng một thẻ anchor và một ID. Nhưng trong Angular, điều này không hoạt động như mong đợi. Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo jump links mượt mà, thân thiện với router. Đến cuối bài, trang của bạn sẽ nhảy và cuộn tốt hơn bao giờ hết!

Liên kết Dự án Stackblitz

Bạn có thể xem dự án mẫu cho hướng dẫn này tại đây:

Tại Sao Các Liên Kết Anchor Thông Thường Thất Bại Trong Angular

Chúng ta sẽ làm việc với một ứng dụng Angular trong bài viết này:

Hiện tại, chúng ta có một bảng nội dung ở đầu trang:

Mỗi mục trông như một liên kết, nhưng nếu tôi nhấp vào chúng… không có gì xảy ra.

Điều này xảy ra vì các liên kết này thực sự chưa trỏ đến đâu cả.

Chúng ta có tất cả các phần tương ứng trong trang và các liên kết nên dẫn đến từng phần đó.

Trong một trang web thông thường, điều này rất dễ thực hiện với các anchor và IDs, nhưng đối với ứng dụng Angular, mọi thứ có phần khác biệt.

Trong Angular, bạn không thể chỉ việc thêm một href vào đó.

Vậy, chúng ta hãy làm điều này theo cách của Angular!

Cách Thêm RouterLink và Fragment IDs

Hãy xem mã cho component này để hiểu rõ hơn về những gì chúng ta đang bắt đầu.

Ở đầu, chúng ta có danh sách các liên kết tạo thành khu vực bảng nội dung:

html Copy

<ul>
    <li>
        <a>Thêm một Liên kết</a>
    </li>
    <li>
        <a>Liên kết đến một Phần</a>
    </li>
    <li>
        <a>Cách Nó Liên Quan Đến Lịch Sử</a>
    </li>
    <li>
        <a>Cách Xử Lý Cuộn</a>
    </li>
</ul>

Hiện tại, mỗi liên kết chỉ là một thẻ anchor trống, đó là lý do tại sao chúng không dẫn đến đâu cả.

Tiếp theo, phần tiêu đề cho các phần này đã có IDs và đó chính là những gì chúng ta cần liên kết đến:

html Copy

<h2 id="links">
    Thêm một Liên kết
</h2>
<p>...</p>
<h2 id="linking">
    Liên kết đến một Phần
</h2>
<p>...</p>
<h2 id="history">
    Cách Nó Liên Quan Đến Lịch Sử
</h2>
<p>...</p>
<h2 id="scrolling">
    Cách Xử Lý Cuộn
</h2>
<p>...</p>

Trong một trang web bình thường, chúng ta chỉ cần thêm một href với ID và xong. Nhưng chúng ta không thể làm điều đó ở đây.

Thay vào đó, chúng ta cần sử dụng directive routerLink và thuộc tính fragment.

Điều này cho phép Angular xử lý URL và fragment một cách chính xác.

Để sử dụng directive này, chúng ta cần import nó trong mảng imports của component:

typescript Copy

import { RouterLink } from '@angular/router';

@Component({
    selector: 'app-page',
    ...,
    imports: [ RouterLink ]
})
export class PageComponent {
}

Sau đó, trong template, chúng ta có thể sử dụng directive routerLink:

html Copy

<a routerLink="">Thêm một Liên kết</a>

Vì chúng ta chỉ đang thêm một jump link, tôi không muốn chuyển đổi route.

Nếu tôi đang điều hướng đến một route khác, tôi chỉ cần thêm route ở đây:

html Copy

<a routerLink="adding-links">Thêm một Liên kết</a>

Nhưng trong trường hợp này, chúng ta không muốn thay đổi route, vì vậy hãy để trống phần này cho bây giờ.

Bây giờ, để điều hướng đến tiêu đề bằng ID, chúng ta sử dụng thuộc tính “fragment” và chỉ cần truyền vào ID tương ứng, trong trường hợp này là “links”:

html Copy

<a routerLink="" fragment="links">
    Thêm một Liên kết
</a>

Được rồi, điều này nên hoạt động đúng không?

Thực tế, không.

Điều này xảy ra bởi vì, với cách chúng ta đã thiết lập, chúng ta thực sự đang chuyển đổi route.

Chúng ta có thể thấy rằng “home” là route hiện tại:

Khi chúng ta nhấp vào liên kết, chúng ta loại bỏ phần “home” của đường dẫn, nhưng chúng ta đã thiết lập ID anchor thành công:

Vậy, điều đó là tốt và xấu, đúng không?

Làm sao để chúng ta khắc phục điều này?

Giữ Lại Route Hiện Tại Với RouterLink Và Mảng Trống

Thực ra, có một mẹo đơn giản… gán routerLink cho một mảng trống:

html Copy

<a [routerLink]="[]" fragment="links">
    Thêm một Liên kết
</a>

Nghe có vẻ kỳ lạ, nhưng đây là cách Angular nói...

"Đừng đi đâu cả, chỉ cần giữ lại route hiện tại"

Bây giờ chúng ta có thể áp dụng điều này cho phần còn lại của các liên kết:

html Copy

<ul>
    <li>
        <a [routerLink]="[]" fragment="links">
            Thêm một Liên kết
        </a>
    </li>
</ul>
<ul>
    <li>
        <a [routerLink]="[]" fragment="linking">
            Liên kết đến một Phần
        </a>
    </li>
</ul>
<ul>
    <li>
        <a [routerLink]="[]" fragment="history">
            Cách Nó Liên Quan Đến Lịch Sử
        </a>
    </li>
</ul>
<ul>
    <li>
        <a [routerLink]="[]" fragment="scrolling">
            Cách Xử Lý Cuộn
        </a>
    </li>
</ul>

Được rồi, điều này nên hoạt động đúng không?

Đáng tiếc là không, nhưng chúng ta đang tiến gần hơn.

Bây giờ khi chúng ta nhấp vào các liên kết, chúng ta không còn chuyển đổi route, nhưng chúng ta cũng không cuộn đến phần đúng nữa:

Chúng ta đang thêm các fragments thích hợp vào URL:

Vậy điều gì đang xảy ra bây giờ?

Bật Cuộn Anchor Trong Angular Router

Hóa ra trong một ứng dụng Angular, chúng ta thực sự cần bật cái được gọi là "cuộn anchor".

Để làm điều này, chúng ta mở file chứa cấu hình router, trong trường hợp của chúng ta là file main.ts.

Sau đó, bên trong hàm provideRouter(), chúng ta thêm hàm withInMemoryScrolling() và bật anchorScrolling:

typescript Copy

import { ..., withInMemoryScrolling } from '@angular/router';

bootstrapApplication(App, {
    providers: [
        provideRouter([
            ...
        ], 
        withInMemoryScrolling({ anchorScrolling: 'enabled' }))
    ]
});

Điều này nói với Angular...

"Nếu có một fragment trong URL, hãy cuộn đến nó"

Với điều này được bật, các liên kết cuối cùng dẫn chúng ta đến phần chính xác, và ngay cả nút quay lại cũng hoạt động đúng với các fragments trong lịch sử:

Và, tin hay không, chúng ta có thể cải thiện điều này thậm chí còn hơn nữa!

Thêm Cuộn Mượt Với CSS

Hãy cải thiện thêm một lần nữa.

Hiện tại, việc nhảy giữa các phần là ngay lập tức.

Nó hoạt động, nhưng có phần gây khó chịu. Hãy làm cho nó mượt mà hơn.

Chúng ta có thể làm điều này chỉ với một dòng CSS.

Trong ứng dụng này, việc cuộn dọc diễn ra trên phần tử HTML, vì vậy chúng ta sẽ mở file global_styles.css.

Trên selector HTML, chúng ta chỉ cần thêm thuộc tính scroll-behavior và thiết lập giá trị là “smooth”:

css Copy

html {
    ...
    scroll-behavior: smooth;
}

Đó là tất cả! Bây giờ việc điều hướng giữa các phần trở nên mượt mà và tự nhiên:

Chỉ với một dòng, nhưng thực sự nâng cao cảm giác của ứng dụng.

Suy Nghĩ Cuối Cùng và Các Bước Tiếp Theo

Vậy là xong! Chúng ta đã biến những liên kết vô hồn thành các liên kết router Angular hoàn chỉnh có khả năng nhảy, cuộn và tương tác tốt với nút quay lại.

Trong ví dụ này, chúng ta đã:

Sử dụng directive routerLink với fragments để thêm jump links
Bật cuộn trong bộ nhớ trong cấu hình router
Và thêm cuộn mượt với CSS

Đây là những chi tiết nhỏ giúp ứng dụng Angular của bạn trở nên chuyên nghiệp hơn.

Nếu bạn thấy bài viết này hữu ích và muốn thêm nhiều mẹo Angular giúp ứng dụng của bạn trở nên hoàn thiện hơn, đừng quên đăng ký theo dõi!

Tài Nguyên Bổ Sung

Muốn Thử Nghiệm?

Bạn muốn thử nghiệm điều này không? Hãy xem ứng dụng demo đầy đủ bên dưới.

Sử Dụng Jump Links Trong Angular: Hướng Dẫn Chi Tiết

Giới thiệu

Liên kết Dự án Stackblitz

Tại Sao Các Liên Kết Anchor Thông Thường Thất Bại Trong Angular

Cách Thêm RouterLink và Fragment IDs

Giữ Lại Route Hiện Tại Với RouterLink Và Mảng Trống

Bật Cuộn Anchor Trong Angular Router

Thêm Cuộn Mượt Với CSS

Suy Nghĩ Cuối Cùng và Các Bước Tiếp Theo

Tài Nguyên Bổ Sung

Muốn Thử Nghiệm?

Bình luận