Время начать с самого первого задания в этом курсе.
В этом задании вы будете работать с угловыми компонентами.
Вы собираетесь создать новый компонент под названием dishdetail
, чтобы добавить его в угловое приложение
, и вы обновите его шаблон, чтобы он отображал детали конкретного блюда.
Ранее, в предыдущем упражнении, мы ввели карту в наш компонент меню.
Мы собираемся удалить эту карту, и вместо этого включить компонент
dishdetail вместо этой карты, чтобы компонент
dishdetail мог отображать свою информацию
в этой части экрана.
Ваша первая задача — создать компонент dishdetail.
В конце первой задачи, как только вы создали компонент dishdetail,
затем, в файле шаблона компонентов меню
вы собираетесь заменить эту карту селектором
компонента dishdetail там,
так что детали компонента dishdetails будут отображаться
прямо под меню в компоненте меню.
Мы уже видели, как можно добавить селектор
из одного компонента в другой компонент.
Когда мы создали компонент меню,
мы включили это в компонент приложения
, чтобы в конце первой задачи это был результат на вашем браузере,
где, вместо карты, отображающей детали блюда,
вы увидите эти слова под названием «dishdetail работает!» в нижней части страницы.
После того, как вы закончите это, вы скачаете
предварительно настроенный файл шаблона компонентов dishdetail с некоторыми недостающими частями,
, а затем замените на место в шаблоне вашего компонента dishdetail.
После того, как вы замените шаблон поставляемого компонента dishdetail,
, вы увидите страницу обновленной следующим образом.
Итак, вы увидите две части на странице здесь, одна из которых говорит
«Показать детали блюда здесь».
Вы будете использовать компонент карты, чтобы создать детали блюда,
и отобразить это блюдо здесь.
Кроме того, вы также выводите набор комментариев о блюде
во второй части этого компонента здесь.
Теперь, чтобы вы начали, в инструкции по назначению
Я предоставил вам новый объект JavaScript
, содержащий детали блюда,
, включая комментарии об этом блюде.
Вы собираетесь использовать эту информацию для того, чтобы построить
эти два: компонент карты для отображения
детали блюда, и список комментариев здесь.
Ваша вторая задача заключается в том, чтобы обновить файл
TypeScript, чтобы включить в него новую переменную блюда,
, а затем использовать переменную блюда с компонентом карты,
, а затем подготовить компонент карты здесь, чтобы отобразить детали блюда.
После завершения второй задачи
в вашем приложении вы увидите, что,
чуть ниже меню, вы увидите детали
данной информации блюдо отображается в карточке, как это здесь,
, так что вы можете увидеть название, изображение,
, а также описание сделано ниже.
Теперь, после завершения этого, вы перейдете к третьему заданию.
В третьей задаче вы будете использовать комментарии, которые также вложены в блюдо
, которое мы предоставили вам в объекте JavaScript
, а затем использовать их для построения и отображения списка комментариев здесь.
В конце третьей задачи
это то, что вы увидите на правой стороне вашего блюда.
Вы можете видеть, что у вас есть заголовок здесь с
слово «Комментарии»,
, а затем у вас есть список комментариев, которые отображаются здесь.
Информация для построения этих комментариев доступна внутри объекта
dish JavaScript, который мы предоставили для вас.
В частности, обратите внимание, что это фактический комментарий,
это количество звезд данного комментария,
и здесь мы показываем имя автора с двумя тире спереди,
и примечание, в конце, мы показываем здесь дату.
Для того, чтобы иметь возможность построить эту дату здесь,
вам нужно использовать угловую трубу с именем Date.
Мы уже видели использование встроенной трубы под названием Uppercase
в предыдущем упражнении,
, поэтому вы просто используете Date pipe для того, чтобы создать эту дату
, которая будет отображаться справа от имени автора здесь.
Итак, это подсказки, чтобы вы начали с
эту третью задачу в вашем первом задании.
Получайте удовольствие, выполняя первое задание.
Какие бы ресурсы вы ни нуждались,
предварительно сконфигурированный полузавершенный файл шаблона
и объект JavaScript блюдо доступны
в инструкции по этому назначению.