В AngularJS 1, якщо ви хочете перемикати стан відображення елементів DOM, ви, ймовірно, будете використовувати вбудовані команди в AngularJS 1, такі як ng-show або ng-hide:
Приклад AngularJS 1:
В Angular2 новий синтаксис шаблону дозволяє прив'язувати вирази до будь-яких рідних властивостей елементів DOM. Ця неймовірна функція відкриває безмежні можливості. Один із них — прив'язати вираз до нативної прихованої властивості, що трохи схоже на ng-show, а також встановлювати відображення: none для елемента:
[прихований] приклад angular2 (не рекомендується):
На перший погляд, наведений вище приклад здається ng-show у AngularJS 1. Насправді, вони це зробили! важливі відмінності.
І ng-show, і ng-hide керують станом відображення елементів DOM через CSS-клас ng-hide, який просто встановлює елемент на display: none. Головне тут те, що AngularJS 1 додано до класу ng-hide! важливо, що коригує пріоритет класу так, щоб він міг скасувати призначення атрибута відображення елемента з інших стилів.
Повертаючись до цього прикладу, браузер реалізує стиль display: none на нативному прихованому атрибуті. Більшість браузерів його не використовують! важливо коригувати пріоритет. Тому керування станом відображення елемента за допомогою [hidden]="expression" легко може бути випадково перезаписане іншими стилями. Наприклад: якщо я напишу такий стиль для цього елемента в іншому місці, display: flex, це має пріоритет над нативною прихованою властивістю (див. тут).
З цієї причини ми зазвичай використовуємо *ngif для перемикання стану присутності елемента, щоб досягти тієї ж мети:
*ngIf приклад angular2 (рекомендовано):
На відміну від рідної прихованої властивості, *ngIf у angular2 не має стилістичних обмежень. Незалежно від того, який тип CSS ви напишете, вона в безпеці. Однак все ж необхідно зазначити, що *ngIf не контролює стан відображення елемента, а безпосередньо досягає ефекту відображення або відображення шляхом додавання/видалення елемента з шаблону.
Звісно, ви також можете додати прихований пріоритет до прихованого атрибуту елемента, використовуючи глобальний стиль, наприклад display: none !important, щоб досягти цього ефекту. Ви можете запитати: оскільки angular group знає ці проблеми, чому б просто не додати глобальний прихований стиль найвищого пріоритету до прихованого в фреймворку? Відповідь полягає в тому, що ми не можемо гарантувати, що додавання глобальних стилів є найкращим вибором для всіх застосувань. Оскільки такий підхід фактично ламає функціональність, що базується на нативних прихованих можливостях, вибір залишається на розсуд інженерів.
|
Опубліковано 22.05.2019 14:02:02
|
|
|
