Теперь, когда мы изучили привязку данных,
давайте использовать их для
работы над приложением Angular, которое мы использовали до сих пор.
В предыдущей версии углового приложения
у нас было меню визуализируется,
, а затем у нас было конкретное блюдо, показываемое внизу.
Теперь мы хотели бы, чтобы пользователь мог нажать
на любом из пунктов меню, а затем детали, которые будут показаны пользователю.
Это где использование привязки данных поможет нам
реализовать наше приложение, чтобы включить этот вид функции.
Перейдя к текущему состоянию нашего приложения в браузере,
теперь мы можем видеть, что у нас есть наше меню и внизу мы
есть детали одного конкретного блюда, показываемого там.
Теперь, это хорошо и хорошо для начала, но в идеале,
то, что мы хотели бы иметь, это то, что если пользователь нажимает на любой из этих блюд,
мы хотим иметь возможность показать детали блюда в нижней части меню здесь.
Итак, мы хотели бы, чтобы детали блюда были изменены
, исходя из того, какое конкретное блюдо мы нажимаем в любой момент.
Итак, как нам этого добиться?
Итак, вот где использование привязки данных приходит нам на помощь.
Перейдя в наше приложение,
первое, что я собираюсь сделать, это в общей папке,
теперь вы понимаете, что информация о блюде используется
как в компоненте меню, так и в компоненте детали блюда.
Теперь, когда у вас есть такая информация,
было бы более удобно иметь централизованное место
, из которого эта информация передается обоим компонентам.
Поэтому, чтобы помочь мне сделать это,
то, что я собираюсь сделать, это перейти в папку общего доступа, а затем создать новый файл,
, а затем я назовем этот файл как dishes.ts.
Внутри этого файла dishes.ts,
Я собираюсь создать константу, которая поставляет детали блюд.
Так что,
я бы сначала импортирую блюдо,
из класса блюд
, который я уже определил ранее.
Итак, теперь я могу определить константу
, называемую посудой типа массива тарелок,
и тогда я собираюсь хранить детали всех моих блюд.
Теперь, в более ранней версии приложения,
мы видели использование блюд и мы увидели
массив объектов JavaScript, который содержит детали блюд.
Теперь мы собираемся переместить весь этот контент и с обновленной версией его.
Итак, обновленная версия блюд
массив объектов JavaScript дается вам в инструкции,
так просто пойти и скопировать
весь массив объектов JavaScript оттуда, а затем мы вставим его на место здесь.
Таким образом, это становится центральным местом, из которого
информация о блюдах предоставляется вашему приложению.
Я теперь вырезать и вставить детали
блюдо, которые приведены в инструкции упражнения на место здесь,
и поэтому у меня есть четыре блюда, вставленные здесь один,
два три, и четыре блюда, вставленные здесь,
и каждый из этих блюд содержит, конечно же,
детали конкретного блюда и также комментарии к блюду.
Теперь таким образом отображение информации в
шаблон детали блюда становится простым для любого из этих выбранных блюд.
Теперь, если вы откатитесь, вы увидите, что здесь есть красные линии.
Причина этих красных линий заключается в том, что, когда вы посмотрите на объект блюда здесь,
вы увидите, что в объекте блюда у нас нет свойства, называемого комментариями.
Итак, нам нужно создать новое свойство под названием
comments, чтобы добавить в это блюдо здесь. Итак, как нам это сделать?
Так что, чтобы сделать это, мы будем говорить комментарии и
, то я бы сказал комментарий массив здесь.
Теперь сразу же вы понимаете, что для нас нет массива комментариев,
, поэтому нам нужно создать этот массив комментариев.
Итак, что я собираюсь сделать, это создать еще один класс JavaScript
, который содержит детали комментария там.
Итак, чтобы сделать это, сначала я импортирую комментарий из
класса комментариев здесь.
Теперь, конечно, красная линия сразу говорит мне, что у меня нет класса комментариев.
Итак, как добавить класс комментариев?
Итак, идя в общую папку,
мы создадим новый файл с именем comment.ts и внутри этого comment.ts,
мы определим класс под названием comment здесь.
Теперь нам нужно определить определенные свойства для этого класса комментариев.
Итак, каковы свойства, которые у нас есть?
Давайте рассмотрим наш файл dishes.ts
, а затем посмотрим, какие свойства для каждого комментария.
Перейдя в файл dishes.ts,
вы видите, что комментарии содержат
одно свойство называется рейтингом, который кажется числом,
, то у вас есть комментарий, который является строкой и
автор, который является строкой и датой, которая также является строкой.
Итак, нам нужно определить четыре свойства для моего класса комментариев здесь.
Итак, возвращаясь к классу комментариев,
я бы определил рейтинг как число.
Итак, в типе скрипта,
все здесь есть число, то у нас был комментарий, который является автором строки,
который также является строкой,
а затем дата, которая также является строкой здесь.
Итак, это четыре свойства, которые у нас есть здесь.
Теперь, очевидно, мы видели, как мы используем строку даты в предыдущем упражнении
и в задании, как мы использовали
строку даты, чтобы показать дату для комментария там.
Теперь, если вам интересно,
, что на самом деле содержит эта строка даты?
Идя сюда, вы увидите, что эта строка даты имеет определенный формат.
Итак, это стандартный формат для хранения даты здесь.
Этот формат даты является способом определения формата даты ISO OSI.
Итак, мы просто собираемся использовать это,
, так что это стандартизированный формат, который используется также в
многих языках программирования, который позволяет хранить данные в виде строки здесь,
поэтому я просто собираюсь использовать его как таковой здесь.
После внесения изменений в файл
dish.ts, как это здесь, а затем также добавления в класс комментариев здесь,
теперь мы видим, что файл dishes.ts больше не имеет этих красных строк, потому что
комментарий был добавлен в качестве массива объектов в мой класс блюда здесь.
Итак, до сих пор это отлично работает.
Теперь, как нам это использовать?
Теперь, чтобы использовать это,
мы перейдем к меню component.ts,
, а затем здесь мы имеем эту константу, определенную здесь.
Теперь, это не правильный способ сделать это
позже вы увидите, что я использую сервис для всего этого.
Итак, позвольте мне полностью вырезать эту константу отсюда и вместо того, чтобы использовать эту константу,
я собираюсь теперь импортировать блюда
из общей папки
здесь, общие блюда здесь.
Итак, обратите внимание, что эта папка с блюдами экспортирует здесь постоянную посуду.
Итак, это причина, по которой мы можем использовать его.
Так что возвращаясь к блюдам здесь,
Мне нужно экспортировать это отсюда,
, так что я бы сказал экспорт.
Постоянная. Итак, когда я это делаю,
тогда в моем компоненте меню я вижу, что мои блюда могут быть импортированы сюда правильно.
Тогда остальная часть кода здесь будет работать отлично без каких-либо изменений.
Вы увидите, что если вы сохраните значения сейчас
, а затем посмотрите на свое веб-приложение в браузере,
он будет отображаться просто отлично даже после этих изменений.
После сохранения всех изменений, которые вы сделали до сих пор во всех файлах,
если вы идете и посмотрите на свою веб-страницу,
ваша веб-страница отображается так же, как и раньше.
Теперь вторая часть проблемы.
Мы хотим иметь возможность общаться.
Когда мы нажимаем на любой из этих пунктов меню,
мы хотим иметь возможность сообщить эту информацию, чтобы
соответствующее блюдо будет отображаться здесь.
Итак, вот где мы собираемся воспользоваться помощью
привязки данных, которые мы узнали до сих пор.
Возвращаясь к файлу шаблона компонентов меню,
то, что мы собираемся сделать, это то, что для
это «app-dishdetail», что вы включаете внизу здесь,
добавить в шаблон компонентов блюда детали к шаблону компонентов меню,
мы собираемся добавить в свойство называется Блюдо.
Тогда мы назначим это «selectedDish».
Вы помните, что выбранное блюдо является переменной, которую мы определили
в нашем меню компонентов TypeScript файла здесь.
Таким образом, это значение выбранного блюда будет
передаваться через это свойство блюдо здесь.
Теперь мы увидим, как компонент детали блюда может получить эту информацию
, а затем использовать ее хорошо на следующем шаге в упражнении.
Теперь, пока мы здесь,
мы также исправим другую проблему, с которой нам нужно разобраться.
То есть, когда щелкнут любой из пунктов меню,
, то он будет генерировать событие click, и мы хотим, чтобы информация была доставлена в наш файл TypeScript компонента меню.
Итак, чтобы сделать это, мы перейдем в списки сетки меню, которые мы определили здесь.
Для этой сетки здесь
то, что я собираюсь сделать, это определить событие click здесь.
Итак, для события click
то, что я собираюсь сделать, я собираюсь вызвать метод
select, который я определяю внутри моего файла component.ts меню.
Для этого метода onSelect
я собираюсь поставить блюдо в качестве параметра здесь.
Что это за блюдо?
Это блюдо именно это блюдо, которое вы выбрали в
это «пусть блюдо блюд» в синтаксисе ngFor здесь.
Итак, это конкретное блюдо
из массива блюд, которые вы выбрали здесь,
будет передан в качестве параметра для этого метода onSelect,
, что мы собираемся реализовать в нашем файле component.ts меню.
Итак, теперь, когда мы это сделали,
так что это обработчик, который должен быть реализован.
Давайте перейдем к файлу компонента меню, а затем исправим
этот файл, чтобы реализовать этот обработчик там.
Итак, когда вы делаете щелчок по любому из пунктов меню,
тогда будет вызван соответствующий дескриптор и
информация о конкретном блюде будет передана в качестве параметра здесь.
Перейдя в файл menu component.ts, теперь
выбранному блюду будет присвоено значение, основанное на том, какое блюдо я выбираю.
Итак, я собираюсь удалить эту часть, а затем прямо ниже здесь,
я собираюсь реализовать метод onSelect здесь.
Итак, для метода onSelect
это получит параметр, который является параметром блюдо.
Когда этот параметр блюда приходит,
я собираюсь назначить этот selectedDish равным блюду,
параметр, который пришел в качестве значения для метода onSelect здесь.
Итак, вот оно.
Итак, когда вы нажимаете на любой из этих пунктов в меню,
любой из блюд в меню,
, что информация о блюде будет передана через это, а затем
выбранное блюдо будет назначено этому объекту блюда здесь.
Теперь у нас есть, как информация поступает от DOM.
Конкретная клик приведет к тому, что информация о блюде будет доступна нам, и выбранному блюду будет присвоено это значение.
Теперь, возвращаясь к HTML файлу компонента меню,
мы видим, что мы уже присвоили это свойство блюда selectedDish.
Таким образом, это выбранное значение блюда передается
через это свойство блюда в это приложение dishdetail здесь.
Теперь, как компонент детали моего блюда получает эту информацию?
Для этого мы собираемся перейти к компоненту детали блюда и исправить это.
Перейдя к компоненту детали блюда,
первое, что я собираюсь сделать, это удалить
эту константу блюда из моего компонента детали блюда.
Мне это больше не нужно.
Теперь, когда свойство привязывается,
, как то, что мы видели в HTML-файле компонента меню,
затем в моем файле подробностей блюдо,
я могу использовать другой модуль под названием Input Module.
Тогда, для этого блюда,
я собираюсь просто объявить, что как DISH.
Теперь этот модуль ввода позволяет мне объявить декоратор
для этой переменной блюда, которую я определил здесь,
, как это, при входе с скобками здесь к этому блюду здесь.
Тогда, также, мне нужно импортировать
класс блюд
из общего блюда здесь.
Итак, с этим, так что случилось, что я использую модуль ввода.
Таким образом, это способ подачи информации в компонент из другого компонента.
Вы привязываете свойство в шаблоне
другой компонент, как мы видели в файле menu component.html,
, а затем, что будет доступно в качестве входных данных для этого компонента,
объявляя переменную, а затем вызывая входной декоратор для этого.
Теперь, с этим, давайте сохраним изменения во всех файлах, которые мы сделали
, а затем посмотрим на угловую репликацию.
Перейдя в наш браузер,
мы видим, что в этой угловой репликации,
ничего не отображается здесь.
Потому что прямо сейчас, выбранное блюдо
мы не выбрали ни одного из блюд, так что и выбранное блюдо
является пустой объект там.
Итак, мы используем ngIf в шаблоне для детали блюда.
Итак, быстро взгляните на шаблон детали блюда,
вы реализовали это как часть своего задания.
Итак, вы должны были использовать ngIf с блюдом как для кода,
, так и для списка MD там.
Итак, если вы это сделаете,
тогда, когда блюдо в настоящее время не выбрано,
то ничего не будет отображаться внизу.
Но в тот момент, когда я нажимаю на любой из блюд,
, то вы сразу видите детали блюда, отображаемого внизу здесь.
Теперь я могу выбрать второе блюдо, а затем сразу,
вы заметите, что детали блюда отображаются ниже изменяется.
Итак, в любое время, когда я нажимаю на любой из этих блюд,
детали этого конкретного блюда,
включая комментарии будут отображаться внизу здесь.
Итак, это именно то, чего мы хотим достичь в этом конкретном упражнении.
Итак, здесь вы видели использование привязки данных, три различных вида,
включая обработчик событий и событий,
, а также вы видели, как мы можем использовать модуль ввода, чтобы иметь возможность
для извлечения информации в компонент, входящий из другого компонента.
С этим, мы завершим это упражнение,
, где мы узнали, как использовать различные функции связывания данных
доступны в Angular для реализации нашего приложения.
Это хорошее время для вас, чтобы сделать git commit с привязкой данных сообщения.