Jeśli jesteś w branży kodowania od jakiegoś czasu, prawdopodobnie już wiesz, że tworzenie dynamicznych odmian może być nie lada zadaniem w aplikacjach internetowych. W zależności od platformy programistycznej, którą wybierzesz, poziom złożoności może się różnić, ale na szczęście ten wyczyn można łatwo osiągnąć w Angular 8 i niektórych poprzednich wersjach Angular. W tym artykule omówimy ngstyle w agular 8.
Składnia właściwości szablonu w Angular 8
Zanim zagłębimy się w eksplorację wszystkich funkcji i modułów dostępnych w Angular 8, zobaczmy najpierw składnię właściwości w Angular 8 i jak możemy zmienić kolor właściwości koloru w czystej Javie.
let myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // aktualizowanie div poprzez jego właściwościWykonajmy to samo zadanie w Angular 8, korzystając z wbudowanych bibliotek, a także innych modułów.
style przy użyciu składni właściwości, ten tekst jest pomarańczowy
Użyj składni {property} i efektywnie uzyskaj dowolny kod i dokonaj w nim zmian niemal natychmiastowo.
W powyższym przykładzie mamy bezpośredni dostęp do właściwości stylu elementu div. W porównaniu z właściwościami obiektu i atrybutu DOM jest inaczej.
Korzystając z wbudowanych cech Angular 8, możemy dodać elementy CSS do dowolnej wybranej przez nas klasy. Zobacz poniższy przykład, aby lepiej to zrozumieć.
Klasa CSS używająca składni właściwości, ten tekst jest niebieski
NgClass i NgStyle w Angular 8
Jest wbudowany zarówno w ngSyntax, jak i ngClass w Angular 8 i można ich używać do różnych celów. W pewnym sensie wbudowane moduły zapewniają cukier do wprowadzania zmian w bardziej złożonych łańcuchach niż inne. Przyjrzyjmy się składni ngStyle w Angular 8.
style przy użyciu ngStyle
W powyższym przykładzie wykorzystaliśmy ngStyle w Angular do zmiany dynamiki wielu elementów w naszej klasie, jednocześnie grupując kilka elementów razem, aby ułatwić użytkownikowi dostosowanie klasy do swoich potrzeb.
Kontynuacja powyższego przykładu.
styl za pomocą ngStyle + -
Teraz, gdy wiesz już o ngStyle, przyjrzyjmy się niektórym elementom ngStyle.
tablica klas ciąg klas obiekt klas
ngClass w angular pozwala nam również wprowadzać zmiany w naszym kodzie na wiele sposobów, dzięki czemu dynamiczne zmiany mogą być implementowane w mgnieniu oka, podobnie jak ngStyle.
Spójrz na poniższy przykład, aby zobaczyć oba razem w akcji.
importuj {Component} z '@ angular / core' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksport klasy AppComponent {color = 'pink' size = 16 displayText = 'show-class' visible = true constructor () {} toggle () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'hide-class'}}NgClick w Angular 8
Teraz, gdy znasz już podstawowe cechy zarówno ngClass, jak i ngStyle oraz co można osiągnąć za pomocą jednego lub obu z nich na platformie Angular 8, przyjrzyjmy się zastosowaniu ngClick.
Co to jest ngClick?
Jeśli w konkretnym przypadku potrzebujesz powiązać ze sobą wiele elementów programu, aby wykonać jedno zadanie, musisz skorzystać z ngClick.
Powyższe jest przykładem wykorzystania ngClick w AngularJS. Jeśli chodzi o Angular8, ten sam moduł nie istnieje, dlatego należy skorzystać z następujących.
Powyższa składnia służy do ułatwienia wiązania zdarzeń w Angular8, w którym najpierw definiujemy nazwę zdarzenia docelowego wraz z nawiasami, a następnie dołączamy instrukcję szablonu, włączając cudzysłowy oraz operator równości. Po wykonaniu tych kroków Angular8 konfiguruje procedurę obsługi zdarzenia dla tego zdarzenia i po każdym wyzwoleniu to zdarzenie jest wykonywane.
Angular8 to nie tylko jeden z najpopularniejszych języków programowania, ale także jeden z najbardziej dynamicznych, dzięki szerokiej gamie funkcji. Tym samym dochodzimy do końca tego artykułu o NgStyle w wersji kątowej. Mam nadzieję, że rozumiesz, jak to działa.
samouczki ms sql dla początkujących
Sprawdź przez Edureka. Angular to framework JavaScript, który służy do tworzenia skalowalnych, korporacyjnych i wydajnych aplikacji internetowych po stronie klienta. Przy wysokim stopniu wykorzystania frameworka Angular zarządzanie wydajnością aplikacji jest sterowane przez społeczność, pośrednio zapewniając lepsze możliwości zatrudnienia. Angular Certification Training ma na celu objęcie wszystkich tych nowych koncepcji dotyczących tworzenia aplikacji korporacyjnych.