Angular 4 là một framework để xây dựng các ứng dụng web. Nó được xây dựng trên TypeScript và có nhiều tính năng giúp nó mạnh mẽ và linh hoạt hơn Angular 2
Một trong những tính năng giúp Angular 4 trở nên mạnh mẽ hơn là khái niệm thêm các lớp vào một phần tử
Cách dễ nhất để thêm một lớp vào một phần tử trong Angular 4 là sử dụng cú pháp bộ chọn thuộc tính HTML với chỉ thị
2
/div>
Cú pháp này có thể được sử dụng trên bất kỳ thẻ HTML nào và cho phép bạn áp dụng nhiều lớp cùng một lúc, sau đó có thể được áp dụng khi cần bởi các chỉ thị hoặc quy tắc biểu định kiểu khác
Bài viết này sẽ đề cập kỹ lưỡng về việc thêm một lớp vào một phần tử trong Angular 4
Trước khi chúng tôi làm điều đó, chúng tôi sẽ kiểm tra cách các lớp được phân bổ bằng JavaScript truyền thống so với cách chúng được chỉ định trong Angular
Thêm các lớp không có góc 4
Thư viện JavaScript phổ biến Angular cung cấp một cách để thực hiện điều này bằng cách sử dụng chỉ thị
2. Lệnh này cho phép bạn thêm và xóa các lớp khỏi một phần tử một cách dễ dàng một cách linh hoạt
/div>
Tuy nhiên, nếu bạn không sử dụng Angular, thì có một số cách khác để sử dụng JavaScript để hoàn thành nhiệm vụ này
Một plugin jQuery có tên là
4 cho phép bạn dễ dàng thêm một lớp vào bất kỳ phần tử nào miễn là nó đã được khởi tạo với jQuery. Bạn cũng có thể sử dụng phương thức
/div>
5 trong JavaScript và đặt thuộc tính
/div>
0 trên nút DOM đang được thao tác
/div>
Thêm lớp vào phần tử bằng thuộc tính /div>
1 trong góc 4
/div>
Để liên kết trực tiếp với thuộc tính
0 trong Angular 4, chúng tôi sẽ sử dụng thuộc tính
/div>
1. Nó thêm các lớp vào bất kỳ phần tử nào, được truy cập bằng dấu ngoặc sau bộ chọn hoặc bằng cú pháp dấu chấm
/div>
1
/div>
Nếu
5 trả về true, lớp
/div>
6 được thêm vào;
/div>
Thêm lớp vào một phần tử bằng cách sử dụng chỉ thị /div>
2 trong góc 4
/div>
Có nhiều trường hợp sử dụng cho chỉ thị
2. Một trong những cách phổ biến nhất là thêm một lớp vào một phần tử khi người dùng nhấp vào nó
/div>
Chỉ thị
2 cho phép bạn thêm các lớp vào một phần tử dựa trên các điều kiện nhất định. Ví dụ: khi người dùng nhấp vào một thành phần, bạn có thể thêm lớp hoạt động cho thành phần đó
/div>
Chỉ thị
2 rất hữu ích vì nó cho phép bạn tự động thêm và xóa các lớp khỏi các thành phần trong ứng dụng Angular của mình. Hơn nữa, bản thân lệnh này có khả năng thích ứng cao và thực hiện nhiều việc khác nhau dựa trên đầu vào
/div>
Để thêm một lớp điều kiện trong Angular, chúng ta có thể truyền một đối tượng tới
2
/div>
Và trong đoạn mã trên, tên lớp sẽ chỉ được thêm khi điều kiện là đúng
Chúng ta có thể tự động thêm một lớp hoặc nhiều lớp dựa trên các điều kiện
Chúng ta sẽ đi qua một vài ví dụ để hiểu thêm về nó
Mục lục
Thêm một Class dựa trên điều kiện
Để thêm một lớp điều kiện duy nhất, chúng ta có thể sử dụng cú pháp trên
Chúng tôi có thể trực tiếp vượt qua
Vì giá trị khóa
60 là lớp
/div>
62
/div>
Ví dụ: nếu chúng ta muốn thêm tên lớp dựa trên nhiều điều kiện, chúng ta có thể chuyển biểu thức điều kiện dưới dạng giá trị đối tượng
Thông thường trong các dự án của chúng tôi, chúng tôi sẽ có văn bản lỗi, cảnh báo và thông tin để giao tiếp với người dùng
Tôi đã thêm lỗi ba lớp, cảnh báo và thông báo và thêm các kiểu CSS cho chúng
6
/div>
Bây giờ để thêm các lớp này một cách linh hoạt dựa trên các điều kiện nhất định, chúng tôi sẽ sử dụng
63
/div>
Chúng tôi có một đối tượng trong thành phần xác định mức độ ưu tiên của văn bản
1
/div>
Nếu
64 nhỏ hơn 10 sẽ thêm lớp
/div>
65, nếu từ 10 đến 20 sẽ thêm lớp
/div>
66 và nếu lớn hơn 30 sẽ thêm lớp
/div>
67
/div>
6
/div>
Thêm một lớp dựa trên nhiều điều kiện
Và trong trường hợp lớp
66, chúng ta cần thêm nó dựa trên nhiều điều kiện. Chúng ta có thể chuyển biểu thức điều kiện dưới dạng khóa đối tượng như được hiển thị
/div>
8
/div>
Và đối với lớp lỗi chỉ cần kiểm tra một điều kiện như hình bên dưới
9
/div>
Bạn có thể thắc mắc hoặc bối rối vì trong đoạn mã trên, tôi đang thêm các lớp riêng lẻ dựa trên các điều kiện nhất định
Nhưng trên thực tế, chúng ta chỉ cần thêm một lớp duy nhất vào phần tử
62 [thông báo hoặc cảnh báo hoặc lỗi]
/div>
Chúng ta có thể truyền nhiều giá trị khóa đối tượng cho
2
/div>
Bây giờ đến thông tin
62, chúng ta có thể vượt qua ba lớp điều kiện trên
/div>
4
/div>
Mã có thể hơi lạ một chút, nhưng chỉ một lớp duy nhất sẽ được thêm vào khi chạy
Thêm nhiều Lớp bằng ngClass
Ngoài ra, chúng ta có thể thêm nhiều lớp dựa trên các điều kiện
Trong văn bản thông tin trên, chúng ta cần thêm một biểu tượng trong trường hợp lớp
67
/div>
6
/div>
Tôi đang thêm một lớp biểu tượng tuyệt vời phông chữ
13 ngoài lớp
/div>
67
/div>
Danh sách hơn 1500 biểu tượng phông chữ tuyệt vời miễn phí
Chúng ta có thể thêm bao nhiêu lớp được phân tách bằng dấu phân cách
Giờ đây, tệp html mẫu của chúng tôi trở nên phức tạp hơn cùng với biểu tượng lớp tuyệt vời phông chữ mới
Truyền một phương thức cho ngClass
Để tránh điều này, chúng ta chỉ cần chuyển logic sang một phương thức trong tệp ts thành phần của chúng ta và chuyển phương thức đó cho
63
/div>