1
00:00:00,000 --> 00:00:04,518
[МУЗЫКА]

2
00:00:04,518 --> 00:00:09,098
В предыдущем упражнении мы видели использование нашей первой структурной директивы

3
00:00:09,098 --> 00:00:09,812
ngFor.

4
00:00:09,812 --> 00:00:15,186
Давайте зададим себе несколько вопросов о структурных директивах и

5
00:00:15,186 --> 00:00:19,970
узнать, как они полезны, когда мы пишем наши угловые приложения.

6
00:00:22,000 --> 00:00:26,110
Структурные директивы являются одним из видов директив.

7
00:00:26,110 --> 00:00:30,628
Таким образом, директивы являются общим зонтиком, под которым у вас есть компоненты,

8
00:00:30,628 --> 00:00:35,847
, то у вас есть структурные директивы, а затем у вас есть директивы атрибутов.

9
00:00:35,847 --> 00:00:39,015
Так что давайте узнаем немного больше о директивах.

10
00:00:39,015 --> 00:00:43,121
Итак, мы понимаем, что угловые шаблоны динамичны, поэтому они должны быть созданы

11
00:00:43,121 --> 00:00:47,379
«на лету», на DOM будет много манипуляций.

12
00:00:47,379 --> 00:00:52,721
Итак, что директивы помогают нам, это позволить нам дать инструкции

13
00:00:52,721 --> 00:00:57,710
в Angular о том, как рендеринговать шаблоны в DOM.

14
00:00:57,710 --> 00:01:00,900
Таким образом, они используют директивы, чтобы дать инструкции

15
00:01:00,900 --> 00:01:04,880
для Angular, поскольку он рендеринг шаблонов на экране.

16
00:01:04,880 --> 00:01:10,120
Таким образом, в общем, директива может быть определена непосредственно в Angular, используя

17
00:01:10,120 --> 00:01:14,520
класс с декоратором @Directive.

18
00:01:14,520 --> 00:01:19,044
Мы хорошо видим пример директивы, которую мы сами можем создать

19
00:01:19,044 --> 00:01:22,630
немного позже в этом курсе.

20
00:01:22,630 --> 00:01:25,258
На данный момент мы рассмотрим директивы по строительству.

21
00:01:25,258 --> 00:01:26,587
И, в частности,

22
00:01:26,587 --> 00:01:32,650
мы уже столкнулись с нашим первым видом директивы, которая является компонентом.

23
00:01:32,650 --> 00:01:35,060
Компонент представляет собой особый вид директивы и

24
00:01:35,060 --> 00:01:39,800
Angular, который имеет свой собственный шаблон, связанный с ним.

25
00:01:39,800 --> 00:01:45,700
И мы уже видели, как мы можем использовать компонент для определения

26
00:01:45,700 --> 00:01:50,420
частей нашего макета для экрана нашего приложения.

27
00:01:51,910 --> 00:01:57,610
Как я уже упоминал, есть два других вида директив в угловых,

28
00:01:57,610 --> 00:02:00,465
структурных и атрибутивных директивах.

29
00:02:00,465 --> 00:02:05,138
Мы быстро рассмотрим структурные директивы в этом уроке.

30
00:02:05,138 --> 00:02:09,359
И тогда мы рассмотрим атрибутивные директивы немного позже в

31
00:02:09,359 --> 00:02:10,290
этого курса.

32
00:02:11,400 --> 00:02:15,608
Итак, что такое структурные директивы и как они полезны для нас?

33
00:02:15,608 --> 00:02:19,590
То, что мы понимаем, как мы используем структурные директивы,

34
00:02:19,590 --> 00:02:24,910
они помогают нам изменить макет нашего контента

35
00:02:24,910 --> 00:02:30,020
, помогая нам добавлять и удалять элементы из DOM.

36
00:02:30,020 --> 00:02:33,800
В частности, обратите внимание на использование термина add и

37
00:02:33,800 --> 00:02:37,460
удалить и заменить элементы в DOM.

38
00:02:37,460 --> 00:02:41,720
Таким образом, вы буквально используете структурные директивы для манипулирования

39
00:02:41,720 --> 00:02:44,640
вашим DOM вашей веб-страницы.

40
00:02:44,640 --> 00:02:51,124
Таким образом, вы можете использовать структурные директивы, применяя их к элементу хоста,

41
00:02:51,124 --> 00:02:56,738
обычно div или элемент списка в DOM, а также к его потомкам.

42
00:02:56,738 --> 00:02:59,435
Мы уже видели пользователя,

43
00:02:59,435 --> 00:03:04,840
ngFor структурной директивы, в предыдущем упражнении.

44
00:03:04,840 --> 00:03:11,650
И мы увидели, как мы используем ngFor, чтобы перебирать массив блюд,

45
00:03:11,650 --> 00:03:17,020
, а затем компоновку каждого из них, чтобы построить меню для нашего ресторана.

46
00:03:18,480 --> 00:03:22,870
Здесь я кратко упомяну некоторые из общих структурных директив, с которыми вы столкнетесь

47
00:03:22,870 --> 00:03:27,180
при написании углового раздела.

48
00:03:27,180 --> 00:03:31,520
Одной из наиболее распространенных структурных директив, которые вы увидите, является директива ngIf

49
00:03:31,520 --> 00:03:32,620
.

50
00:03:32,620 --> 00:03:40,710
Когда вы используете его в синтаксисе шаблона, вы будете писать его как* ngIf,

51
00:03:40,710 --> 00:03:45,800
, так что эта директива используется в вашем DOM.

52
00:03:45,800 --> 00:03:50,973
Итак, например, если вы примените директиву ngIf к div, как

53
00:03:50,973 --> 00:03:56,050
, это в этом примере, то, что вы указываете, где это

54
00:03:56,050 --> 00:04:01,845
, если selectedDish не null, то этот div будет добавлен в DOM.

55
00:04:01,845 --> 00:04:05,287
Если это selectedDish равно null, то этот div,

56
00:04:05,287 --> 00:04:10,053
все, что содержится в этом div, не будет добавлено в DOM, поэтому

57
00:04:10,053 --> 00:04:15,965
вы буквально удаляете это из DOM, если значение окажется ложным.

58
00:04:15,965 --> 00:04:19,800
Если это окажется правдой, то он добавляется в дамп.

59
00:04:19,800 --> 00:04:24,280
Точно так же мы видели использование директивы ngFor.

60
00:04:24,280 --> 00:04:29,580
Итак, где мы определили, например, для md-list-элемента в предыдущем упражнении

61
00:04:29,580 --> 00:04:35,470
мы сказали*ngFor и сказали, пусть блюдо блюд.

62
00:04:35,470 --> 00:04:40,750
Таким образом, это позволяет нам перебирать массив блюд

63
00:04:40,750 --> 00:04:46,925
, которые определены в нашем типе скрипта пальто.

64
00:04:46,925 --> 00:04:55,570
Еще одной структурной директивой, которая может найти широкое применение, является директива NgSwitch.

65
00:04:55,570 --> 00:04:57,840
Хотя у меня нет примера прямо сейчас,

66
00:04:57,840 --> 00:05:02,940
позже в этом курсе мы столкнемся с использованием директивы NgSwitch.

67
00:05:02,940 --> 00:05:07,080
Это позволяет выборочно добавлять определенные элементы в DOM

68
00:05:07,080 --> 00:05:11,940
, указав условие, в зависимости от того, что условие оценивает,

69
00:05:11,940 --> 00:05:17,060
, то вы будете использовать один из этих элементов среди списка.

70
00:05:17,060 --> 00:05:21,858
Если вы знакомы с оператором switch с C ++ или Java,

71
00:05:21,858 --> 00:05:25,250
NgSwitch кажется вам очень знакомым.

72
00:05:25,250 --> 00:05:29,710
Таким образом, он будет действовать как оператор switch, к которому вы

73
00:05:29,710 --> 00:05:32,295
привыкли из Java или C ++.

74
00:05:32,295 --> 00:05:35,675
С кратким обсуждением структурных директив

75
00:05:35,675 --> 00:05:40,748
давайте перейдем к следующему упражнению, где мы продолжим изучение компонентов.

76
00:05:40,748 --> 00:05:47,459
[МУЗЫКА]