[МУЗЫКА]
В предыдущем упражнении мы видели использование нашей первой структурной директивы
ngFor.
Давайте зададим себе несколько вопросов о структурных директивах и
узнать, как они полезны, когда мы пишем наши угловые приложения.
Структурные директивы являются одним из видов директив.
Таким образом, директивы являются общим зонтиком, под которым у вас есть компоненты,
, то у вас есть структурные директивы, а затем у вас есть директивы атрибутов.
Так что давайте узнаем немного больше о директивах.
Итак, мы понимаем, что угловые шаблоны динамичны, поэтому они должны быть созданы
«на лету», на DOM будет много манипуляций.
Итак, что директивы помогают нам, это позволить нам дать инструкции
в Angular о том, как рендеринговать шаблоны в DOM.
Таким образом, они используют директивы, чтобы дать инструкции
для Angular, поскольку он рендеринг шаблонов на экране.
Таким образом, в общем, директива может быть определена непосредственно в Angular, используя
класс с декоратором @Directive.
Мы хорошо видим пример директивы, которую мы сами можем создать
немного позже в этом курсе.
На данный момент мы рассмотрим директивы по строительству.
И, в частности,
мы уже столкнулись с нашим первым видом директивы, которая является компонентом.
Компонент представляет собой особый вид директивы и
Angular, который имеет свой собственный шаблон, связанный с ним.
И мы уже видели, как мы можем использовать компонент для определения
частей нашего макета для экрана нашего приложения.
Как я уже упоминал, есть два других вида директив в угловых,
структурных и атрибутивных директивах.
Мы быстро рассмотрим структурные директивы в этом уроке.
И тогда мы рассмотрим атрибутивные директивы немного позже в
этого курса.
Итак, что такое структурные директивы и как они полезны для нас?
То, что мы понимаем, как мы используем структурные директивы,
они помогают нам изменить макет нашего контента
, помогая нам добавлять и удалять элементы из DOM.
В частности, обратите внимание на использование термина add и
удалить и заменить элементы в DOM.
Таким образом, вы буквально используете структурные директивы для манипулирования
вашим DOM вашей веб-страницы.
Таким образом, вы можете использовать структурные директивы, применяя их к элементу хоста,
обычно div или элемент списка в DOM, а также к его потомкам.
Мы уже видели пользователя,
ngFor структурной директивы, в предыдущем упражнении.
И мы увидели, как мы используем ngFor, чтобы перебирать массив блюд,
, а затем компоновку каждого из них, чтобы построить меню для нашего ресторана.
Здесь я кратко упомяну некоторые из общих структурных директив, с которыми вы столкнетесь
при написании углового раздела.
Одной из наиболее распространенных структурных директив, которые вы увидите, является директива ngIf
.
Когда вы используете его в синтаксисе шаблона, вы будете писать его как* ngIf,
, так что эта директива используется в вашем DOM.
Итак, например, если вы примените директиву ngIf к div, как
, это в этом примере, то, что вы указываете, где это
, если selectedDish не null, то этот div будет добавлен в DOM.
Если это selectedDish равно null, то этот div,
все, что содержится в этом div, не будет добавлено в DOM, поэтому
вы буквально удаляете это из DOM, если значение окажется ложным.
Если это окажется правдой, то он добавляется в дамп.
Точно так же мы видели использование директивы ngFor.
Итак, где мы определили, например, для md-list-элемента в предыдущем упражнении
мы сказали*ngFor и сказали, пусть блюдо блюд.
Таким образом, это позволяет нам перебирать массив блюд
, которые определены в нашем типе скрипта пальто.
Еще одной структурной директивой, которая может найти широкое применение, является директива NgSwitch.
Хотя у меня нет примера прямо сейчас,
позже в этом курсе мы столкнемся с использованием директивы NgSwitch.
Это позволяет выборочно добавлять определенные элементы в DOM
, указав условие, в зависимости от того, что условие оценивает,
, то вы будете использовать один из этих элементов среди списка.
Если вы знакомы с оператором switch с C ++ или Java,
NgSwitch кажется вам очень знакомым.
Таким образом, он будет действовать как оператор switch, к которому вы
привыкли из Java или C ++.
С кратким обсуждением структурных директив
давайте перейдем к следующему упражнению, где мы продолжим изучение компонентов.
[МУЗЫКА]