1
00:00:03,649 --> 00:00:10,244
Время начать с самого первого задания в этом курсе.

2
00:00:10,244 --> 00:00:14,564
В этом задании вы будете работать с угловыми компонентами.

3
00:00:14,564 --> 00:00:18,172
Вы собираетесь создать новый компонент под названием dishdetail

4
00:00:18,172 --> 00:00:21,690
, чтобы добавить его в угловое приложение

5
00:00:21,690 --> 00:00:29,399
, и вы обновите его шаблон, чтобы он отображал детали конкретного блюда.

6
00:00:29,399 --> 00:00:37,645
Ранее, в предыдущем упражнении, мы ввели карту в наш компонент меню.

7
00:00:37,645 --> 00:00:41,954
Мы собираемся удалить эту карту, и вместо этого включить компонент

8
00:00:41,954 --> 00:00:46,929
dishdetail вместо этой карты, чтобы компонент

9
00:00:46,929 --> 00:00:53,009
dishdetail мог отображать свою информацию

10
00:00:53,009 --> 00:00:56,263
в этой части экрана.

11
00:00:56,263 --> 00:01:01,435
Ваша первая задача — создать компонент dishdetail.

12
00:01:01,435 --> 00:01:08,060
В конце первой задачи, как только вы создали компонент dishdetail,

13
00:01:08,060 --> 00:01:11,810
затем, в файле шаблона компонентов меню

14
00:01:11,810 --> 00:01:18,020
вы собираетесь заменить эту карту селектором

15
00:01:18,020 --> 00:01:19,430
компонента dishdetail там,

16
00:01:19,430 --> 00:01:23,510
так что детали компонента dishdetails будут отображаться

17
00:01:23,510 --> 00:01:27,579
прямо под меню в компоненте меню.

18
00:01:27,579 --> 00:01:31,564
Мы уже видели, как можно добавить селектор

19
00:01:31,564 --> 00:01:35,750
из одного компонента в другой компонент.

20
00:01:35,750 --> 00:01:37,693
Когда мы создали компонент меню,

21
00:01:37,693 --> 00:01:41,500
мы включили это в компонент приложения

22
00:01:41,500 --> 00:01:48,710
, чтобы в конце первой задачи это был результат на вашем браузере,

23
00:01:48,710 --> 00:01:53,454
где, вместо карты, отображающей детали блюда,

24
00:01:53,454 --> 00:01:58,920
вы увидите эти слова под названием «dishdetail работает!» в нижней части страницы.

25
00:01:58,920 --> 00:02:02,390
После того, как вы закончите это, вы скачаете

26
00:02:02,390 --> 00:02:09,349
предварительно настроенный файл шаблона компонентов dishdetail с некоторыми недостающими частями,

27
00:02:09,349 --> 00:02:18,474
, а затем замените на место в шаблоне вашего компонента dishdetail.

28
00:02:18,474 --> 00:02:24,439
После того, как вы замените шаблон поставляемого компонента dishdetail,

29
00:02:24,439 --> 00:02:31,474
, вы увидите страницу обновленной следующим образом.

30
00:02:31,474 --> 00:02:35,692
Итак, вы увидите две части на странице здесь, одна из которых говорит

31
00:02:35,692 --> 00:02:39,480
«Показать детали блюда здесь».

32
00:02:39,480 --> 00:02:43,909
Вы будете использовать компонент карты, чтобы создать детали блюда,

33
00:02:43,909 --> 00:02:47,145
и отобразить это блюдо здесь.

34
00:02:47,145 --> 00:02:52,009
Кроме того, вы также выводите набор комментариев о блюде

35
00:02:52,009 --> 00:02:58,444
во второй части этого компонента здесь.

36
00:02:58,444 --> 00:03:04,270
Теперь, чтобы вы начали, в инструкции по назначению

37
00:03:04,270 --> 00:03:09,710
Я предоставил вам новый объект JavaScript

38
00:03:09,710 --> 00:03:11,719
, содержащий детали блюда,

39
00:03:11,719 --> 00:03:15,770
, включая комментарии об этом блюде.

40
00:03:15,770 --> 00:03:18,875
Вы собираетесь использовать эту информацию для того, чтобы построить

41
00:03:18,875 --> 00:03:21,740
эти два: компонент карты для отображения

42
00:03:21,740 --> 00:03:26,944
детали блюда, и список комментариев здесь.

43
00:03:26,944 --> 00:03:32,699
Ваша вторая задача заключается в том, чтобы обновить файл

44
00:03:32,699 --> 00:03:39,349
TypeScript, чтобы включить в него новую переменную блюда,

45
00:03:39,349 --> 00:03:45,379
, а затем использовать переменную блюда с компонентом карты,

46
00:03:45,379 --> 00:03:52,710
, а затем подготовить компонент карты здесь, чтобы отобразить детали блюда.

47
00:03:52,710 --> 00:03:55,400
После завершения второй задачи

48
00:03:55,400 --> 00:03:59,330
в вашем приложении вы увидите, что,

49
00:03:59,330 --> 00:04:04,699
чуть ниже меню, вы увидите детали

50
00:04:04,699 --> 00:04:09,590
данной информации блюдо отображается в карточке, как это здесь,

51
00:04:09,590 --> 00:04:13,520
, так что вы можете увидеть название, изображение,

52
00:04:13,520 --> 00:04:17,129
, а также описание сделано ниже.

53
00:04:17,129 --> 00:04:22,519
Теперь, после завершения этого, вы перейдете к третьему заданию.

54
00:04:22,519 --> 00:04:29,120
В третьей задаче вы будете использовать комментарии, которые также вложены в блюдо

55
00:04:29,120 --> 00:04:35,239
, которое мы предоставили вам в объекте JavaScript

56
00:04:35,239 --> 00:04:40,819
, а затем использовать их для построения и отображения списка комментариев здесь.

57
00:04:40,819 --> 00:04:43,235
В конце третьей задачи

58
00:04:43,235 --> 00:04:48,595
это то, что вы увидите на правой стороне вашего блюда.

59
00:04:48,595 --> 00:04:52,235
Вы можете видеть, что у вас есть заголовок здесь с

60
00:04:52,235 --> 00:04:54,019
слово «Комментарии»,

61
00:04:54,019 --> 00:04:58,149
, а затем у вас есть список комментариев, которые отображаются здесь.

62
00:04:58,149 --> 00:05:03,480
Информация для построения этих комментариев доступна внутри объекта

63
00:05:03,480 --> 00:05:07,699
dish JavaScript, который мы предоставили для вас.

64
00:05:07,699 --> 00:05:11,610
В частности, обратите внимание, что это фактический комментарий,

65
00:05:11,610 --> 00:05:15,505
это количество звезд данного комментария,

66
00:05:15,505 --> 00:05:21,259
и здесь мы показываем имя автора с двумя тире спереди,

67
00:05:21,259 --> 00:05:25,589
и примечание, в конце, мы показываем здесь дату.

68
00:05:25,589 --> 00:05:28,774
Для того, чтобы иметь возможность построить эту дату здесь,

69
00:05:28,774 --> 00:05:33,600
вам нужно использовать угловую трубу с именем Date.

70
00:05:33,600 --> 00:05:37,610
Мы уже видели использование встроенной трубы под названием Uppercase

71
00:05:37,610 --> 00:05:39,939
в предыдущем упражнении,

72
00:05:39,939 --> 00:05:45,379
, поэтому вы просто используете Date pipe для того, чтобы создать эту дату

73
00:05:45,379 --> 00:05:50,660
, которая будет отображаться справа от имени автора здесь.

74
00:05:50,660 --> 00:05:53,839
Итак, это подсказки, чтобы вы начали с

75
00:05:53,839 --> 00:05:59,240
эту третью задачу в вашем первом задании.

76
00:05:59,240 --> 00:06:02,849
Получайте удовольствие, выполняя первое задание.

77
00:06:02,849 --> 00:06:04,620
Какие бы ресурсы вы ни нуждались,

78
00:06:04,620 --> 00:06:09,980
предварительно сконфигурированный полузавершенный файл шаблона

79
00:06:09,980 --> 00:06:14,115
и объект JavaScript блюдо доступны

80
00:06:14,115 --> 00:06:18,649
в инструкции по этому назначению.