Эй, ребята,
Давайте поговорим в этой главе о директивах Angular.
Введение
Директивы похожи на маркеры в элементе DOM, которые сообщаются с Angular для включения определенного поведения.
В Angular существует три типа директив:
Директивы атрибутов: изменение внешнего вида или поведения элемента, компонента или другой директивы, такой как ngClass и ngStyle;
Структурные директивы: измените макет, добавляя или удаляя элементы DOM, такие как ngIf и ngFor;
Компоненты: директивы с моделью.
Запуск приложения на вашем терминале:
ng new diretivasPoc
Давайте создадим приложение, в котором мы можем немного узнать директивы, о которых мы поговорим в этой статье:
Начните с ngIf:
Это директива, которая позволяет нам изменить страницу из условного объявления, и это должно означать, что мы помещаем ngIf в элемент или компонент, мы можем создать или удалить этот элемент в условии, которое мы предоставляем:
Подводя итог, преобразуйте предоставленное значение в эквивалент true или false… после того, как будет принято решение, показывать элемент или нет.
ngSwitch
Это директива, которая показывает элемент группы в основе условия. Он использует директивы ngSwitchCase и ngSwitchDefault:.
Установите переменную и используйте в .html и настройте ниже.
Результат будет примерно таким:
нгфор
Вы знаете, когда мы просматриваем список таблиц с большим количеством информации?
Это происходит с помощью цикла повторения, который создает все данные один за другим…
Итак, ngFor это правильный инструмент, который нужно иметь при себе.
Как использовать этот инструмент?
Как показано ниже, у нас есть список для повторения:
Мы можем представить данные в виде списка или в виде таблицы:
Посмотрите, как мы это видим:
ngClass
Это директива, которая позволяет вам динамически определять класс из элемента Dom.
Давайте рассмотрим, как это работает:
Обратите внимание: если !isFavorite показывает значок (двойная звездочка), в противном случае isFavorite (двойная звездочка)
нгстиль
Он используется для добавления стиля в элемент DOM, см. ниже:
В этом примере я был далеко, используя двустороннюю привязку данных Inputs для изменения цветного шрифта и размера:
И это все, ребята, это резюме того, как работает с этими основными директивами. Учтите, что у нас есть слишком настраиваемые директивы, которые позволяют вам создавать свои собственные правила.
Взгляните на мой Github в этом репозитории.
Увидимся на следующем… Пока
