В 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! важно, что корректирует приоритет класса так, чтобы он мог отменить присвоение атрибута отображения элемента из других стилей.
Возвращаясь к этому примеру, браузер реализует стиль отражания: none на нативном скрытом атрибуте. Большинство браузеров его не используют! важно скорректировать приоритет. Таким образом, управление состоянием отображения элемента с помощью [скрытого]=«выражения» легко может быть случайно перезаписано другими стилями. Например: если я напишу такой стиль для этого элемента в другом месте, display: flex, это имеет приоритет над нативным скрытым свойством (см. здесь).
По этой причине мы обычно используем *ngif для переключения состояния присутствия элемента и достижения той же цели:
*ngIf пример angular2 (рекомендуется):
В отличие от нативного скрытого свойства, *ngIf в angular2 не ограничено стилем. Какой бы CSS вы ни написали, она в безопасности. Однако необходимо отметить, что *ngIf не контролирует состояние отображения элемента, а напрямую достигает эффекта отображения или нет, добавляя или удаляя элемент из шаблона.
Конечно, вы также можете добавить скрытый приоритет к скрытому атрибуту элемента, используя глобальный стиль, например display: none !important, чтобы добиться этого эффекта. Вы можете спросить: раз группа angular знает эти проблемы, почему бы просто не добавить глобальный самый приоритетный скрытый стиль к скрытому в фреймворке? Ответ в том, что мы не можем гарантировать, что добавление глобальных стилей — лучший выбор для всех приложений. Поскольку такой подход фактически нарушает функциональность, основанную на нативных скрытых возможностях, выбор оставляем инженерам.
|
Опубликовано 22.05.2019 14:02:02
|
|
|
