Nếu bạn đã làm trong ngành mã hóa một thời gian, có thể bạn đã biết rằng việc phát triển các biến thể động có thể là một nhiệm vụ khá trong các ứng dụng web. Tùy thuộc vào nền tảng lập trình mà bạn chọn để sử dụng, mức độ phức tạp của bạn có xu hướng khác nhau, nhưng may mắn là bạn có thể dễ dàng đạt được thành tích này trong Angular 8 và một số phiên bản Angular trước đó. Trong bài viết này, chúng ta sẽ thảo luận về ngstyle trong agular 8.
Cú pháp thuộc tính mẫu trong Angular 8
Trước khi chúng ta đi sâu vào khám phá tất cả các chức năng và mô-đun đi kèm với Angular 8, trước tiên chúng ta hãy xem cú pháp thuộc tính trong Angular 8 và cách chúng ta có thể thay đổi màu của thuộc tính color trong Java thuần túy.
let myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // cập nhật div thông qua các thuộc tính của nóHãy để chúng tôi thực hiện nhiệm vụ tương tự trong Angular 8 bằng cách sử dụng các thư viện tích hợp sẵn cũng như các mô-đun khác.
kiểu sử dụng cú pháp thuộc tính, văn bản này có màu cam
Sử dụng cú pháp {property} và đạt được bất kỳ mã nào một cách hiệu quả và thực hiện các thay đổi đối với mã đó gần như ngay lập tức.
Trong ví dụ trên, những gì chúng ta đã làm là truy cập trực tiếp thuộc tính kiểu phần tử div. So với các thuộc tính trên đối tượng và thuộc tính DOM, điều này là khác nhau.
hướng dẫn Spring mvc cho người mới bắt đầu
Sử dụng các đặc điểm Angular 8 có sẵn, chúng ta có thể thêm các phần tử CSS vào bất kỳ lớp nào mà chúng ta chọn. Hãy xem ví dụ dưới đây để hiểu rõ hơn về điều này.
Lớp CSS sử dụng cú pháp thuộc tính, văn bản này có màu xanh lam
NgClass và NgStyle trong Angular 8
Nó được tích hợp sẵn với cả ngSyntax và ngClass trong Angular 8 và chúng có thể được sử dụng cho nhiều mục đích khác nhau. Theo một cách nào đó, các mô-đun tích hợp sẵn cung cấp đường để thực hiện các thay đổi đối với các chuỗi phức tạp hơn các mô-đun khác. Chúng ta hãy cùng xem cú pháp của ngStyle trong Angular 8.
phong cách sử dụng ngStyle
Trong ví dụ trên, chúng tôi đã sử dụng ngStyle trong Angular để thay đổi động lực của nhiều phần tử trong lớp của chúng tôi, đồng thời nhóm một số phần tử lại với nhau để tạo điều kiện cho người dùng tùy chỉnh lớp theo nhu cầu của họ.
Tiếp tục của ví dụ trên.
phong cách sử dụng ngStyle + -
Bây giờ bạn đã biết về ngStyle, hãy xem xét một số yếu tố của ngStyle.
mảng các lớp chuỗi các lớp đối tượng của các lớp
ngClass trong góc độ cũng cho phép chúng ta thực hiện các thay đổi đối với mã của mình theo nhiều cách để các thay đổi động có thể được thực hiện trong nháy mắt, giống như ngStyle.
Hãy xem ví dụ bên dưới, để xem cả hai cùng hoạt động.
nhập {Thành phần} từ '@ angle / core' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent {color = 'pink' size = 16 displayText = 'show-class' display = true constructor () {} toggle () {this.vosystem =! this.vosystem this.displayText = this.vosystem? 'show-class': 'hide-class'}}NgClick trong Angular 8
Bây giờ bạn đã biết các tính năng cơ bản của cả ngClass và ngStyle và những gì có thể đạt được khi sử dụng một hoặc cả hai trong nền tảng Angular 8, hãy cùng chúng tôi xem xét việc sử dụng ngClick.
NgClick là gì?
Nếu trong một sự kiện cụ thể, bạn cần liên kết nhiều phần tử của một chương trình lại với nhau để có thể đạt được một tác vụ duy nhất, thì bạn cần sử dụng ngClick.
Trên đây là một ví dụ về cách ngClick được sử dụng trong AngularJS. Khi nói đến Angular8, mô-đun tương tự không tồn tại, và do đó, người ta cần tận dụng những điều sau.
Cú pháp trên được sử dụng để hỗ trợ ràng buộc sự kiện trong Angular8, trong đó trước tiên chúng ta xác định tên của sự kiện đích cùng với dấu ngoặc đơn và sau đó bao gồm một câu lệnh mẫu bằng cách bao gồm các dấu ngoặc kép cũng như toán tử bằng. Khi các bước này được thực hiện, Angular8 thiết lập một trình xử lý sự kiện cho sự kiện này và bất cứ khi nào được kích hoạt, sự kiện này sẽ được thực thi.
khuôn khổ kết hợp trong selen webdriver
Angular8 không chỉ là một trong những ngôn ngữ lập trình phổ biến nhất hiện có, mà nó còn là một trong những ngôn ngữ năng động nhất, nhờ vào nhiều tính năng của nó. Với điều này, chúng ta kết thúc bài viết này về NgStyle trong góc độ. Tôi hy vọng bạn đã hiểu về cách hoạt động của chúng.
kiểm tra của Edureka. Angular là một khung JavaScript được sử dụng để tạo các ứng dụng web phía máy khách có thể mở rộng, doanh nghiệp và hiệu suất. Với việc áp dụng Angular framework đang ở mức cao, việc quản lý hiệu suất của ứng dụng được cộng đồng thúc đẩy gián tiếp thúc đẩy cơ hội việc làm tốt hơn. Khóa đào tạo Chứng chỉ Angular nhằm mục đích bao quát tất cả các khái niệm mới này về Phát triển ứng dụng doanh nghiệp.