Hôm nay mình sẽ mang đến cho các bạn một bài viết vô cùng thú vị và bổ ích. Bạn có bao giờ gặp rắc rối khi phải sử dụng các phương thức setter và getter trong Angular không? Hãy yên tâm, từ phiên bản Angular v16.1.0, một tính năng mới cực kỳ hữu ích đã được giới thiệu nhằm cung cấp một cách tiếp cận dễ dàng và thay thế để chuyển đổi – Transform các giá trị input, từ đó loại bỏ nhu cầu phải sử dụng các phương thức setter và getter. Nghe hấp dẫn chưa nào?

Vấn đề với Setters và Getters

Để hiểu rõ hơn, trước hết, chúng ta cùng tìm hiểu về setter và getter nhé. Trong lập trình hướng đối tượng, setter và getter là những phương thức được sử dụng để thiết lập và lấy giá trị của các thuộc tính. Tuy vậy, việc sử dụng chúng đôi khi có thể gây ra những phiền toái không đáng có.

Ví dụ, xem xét đoạn mã dưới đây:

Trong đoạn mã trên, khi chúng ta sử dụng FooComponent và truyền width input dưới dạng một chuỗi:

Hàm chuyển đổi toNumber sẽ xử lý việc chuyển đổi, chuyển đổi giá trị chuỗi thành số.

Đối với những lập trình viên mới hoặc chưa quen với cách làm việc này, việc phải sử dụng các phương thức setter và getter có thể trở nên phức tạp và gây rối.

Giải pháp từ Angular v16.1.0

Rồi, vậy giải pháp ở đâu? Đó chính là tính năng mới của Angular: transform option. Với transform option, bạn có thể dễ dàng chuyển đổi các giá trị input mà không cần phải sử dụng setter và getter. Hãy xem xét một ví dụ cụ thể dưới đây.

Đoạn mã dưới đây minh họa cách sử dụng transform option:

Trong đoạn mã trên, hàm chuyển đổi booleanAttribute được sử dụng để xử lý việc chuyển đổi boolean. Bây giờ, khi chúng ta sử dụng CheckboxComponent và chỉ định thuộc tính disabled:

Hàm chuyển đổi sẽ diễn giải đúng mực sự hiện diện của thuộc tính như true.

Đáng chú ý là Angular đã sử dụng tính năng này một cách nội tại trong router.

Giải pháp cho các thuộc tính HTML

Cũng như vậy, transform option cũng có thể giúp chúng ta giải quyết vấn đề với các thuộc tính HTML. Nếu bạn đã từng làm việc với Angular, có lẽ bạn đã từng gặp vấn đề khi Angular hiểu tất cả các thuộc tính tĩnh dưới dạng chuỗi, dẫn đến một vấn đề phổ biến. Ví dụ, đoạn mã sau đây sẽ trả về một chuỗi rỗng:

Để giải quyết vấn đề này, chúng ta có thể sử dụng transform option thay cho việc sử dụng các phương thức getter và setter.

Tổng kết

Nhìn chung, với việc giới thiệu transform option trong decorator @Input, Angular đã đơn giản hóa quá trình chuyển đổi giá trị input, mang lại một cách tiếp cận tinh gọn hơn so với các phương thức setter và getter truyền thống.