[MUSIC]
Если у вас есть статический сайт,
, то у вас есть все данные, которые вам нужны для создания вашего сайта.
И он будет создан один раз, и ваш сайт готов к работе.
Но многие сайты в эти дни управляются данными из бэкэнда.
Ваше веб-приложение будет извлекать данные с серверного сервера и
затем использовать данные для динамической компоновки контента на вашем сайте, или
даже обновлять контент на вашем сайте.
Таким образом, для этого требуется, чтобы данные поступали из бэкэнда через
ваше веб-приложение в DOM.
И любое взаимодействие пользователя в DOM должно быть передано обратно в ваше веб-приложение.
Таким образом, это требует связи между DOM и
вашего компонента в угловой структуре, например.
Давайте посмотрим, как это происходит в угловой структуре и
с немного более подробным.
То, что мы узнали до сих пор, так это то, как готовится компонент.
Таким образом, мы увидели, что компонент состоит из двух основных частей: typescript
файл, где определена архитектура компонента, и свойства.
И методы, а затем у вас есть шаблон, который
определяет, как содержание выкладывается, и добавляется в DOM.
Таким образом, шаблон является тот, который будет поставляться компонентом
занять часть вашей веб-страницы.
Таким образом, шаблон формирует коммуникационную среду для вашего DOM.
И этот шаблон требует, чтобы данные были получены от вашего компонента, чтобы
рендеринг части контента на вашем шаблоне и
соответственно в DOM вашей веб-страницы.
Теперь, если у вас не было роскоши структуры, такой как Angular,
, вы должны иметь дело со всеми подробностями о том, как
потоки данных с сайта приложения на DOM.
И как события взаимодействия с пользователем, вызванные в
DOM будут отправлены обратно в ваше приложение.
К счастью, с кадром работает как Angular,
они поддерживают все эти поведения по своей сути.
Теперь мы уже видели одно использование потока данных из свойства компонента
к шаблону в предыдущих упражнениях.
Где мы использовали двойные фигурные скобки, чтобы предоставить информацию о том, что
из переменной в коде TypeScript вашего компонента, в ваш шаблон.
Мы рассмотрим другие способы, и
затем также в упражнении, которое следует, мы будем использовать это,
, чтобы изменить угловое приложение, которое мы разрабатывали до сих пор.
То, что мы говорили, до сих пор, является привязкой данных,
механизм координации потока информации между шаблоном и
компонента, или между DOM и компонентом.
На уровне компонента это какое-то свойство или
метод, который должен быть либо поставлен в шаблон, либо вызван из DOM.
Или на стороне шаблона, это может быть некоторая информация
, которая требуется шаблону для отображения в DOM или
даже из DOM, захваченного и отправленного обратно вашему компоненту.
Таким образом, все это требует, чтобы данные, поступающие из компонента в
шаблон или события, собранные из DOM или
, были отправлены обратно в ваш компонент, чтобы он действовал на эти события.
Теперь это можно легко обработать в угловой структуре, используя четыре разных типа
потока информации, которые мы обобщим в следующем слайде.
Возвращаясь к взаимодействию между компонентом и шаблоном,
мы уже видели первый вид взаимодействия между компонентом и
шаблон, где значение свойства течет в шаблон.
Таким образом, мы видели использование названия блюда,
описание блюда, детали комментария блюда и так
на поставку для того, чтобы отобразить информацию в вашем шаблоне.
Так вот где мы использовали двойные скобки, чтобы заключить тот факт, что
значение из вашего компонента используется в вашем шаблоне.
Другой вид потока информации, который вы увидите, - это где
вы указываете какое-то свойство, связанное с тегом в квадратных скобках.
А затем присвойте ему значение из одного из свойств в вашем компоненте.
Такой подход мы увидим в упражнении, которое следует
сразу после этой лекции.
Так что здесь мы бы указали что-то в квадратных скобках.
Так что следите за
пример этого в упражнении, где я расскажу больше об этом.
Аналогично, если у вас есть событие, сгенерированное рядом с DOM,
это событие может привести к вызову обработчика или
метода В вашем компоненте, который будет заботиться о обработке этого события.
Таким образом, методы, которые будут вызываться
, события из вашего DOM называются обработчиками.
Итак, ручка не что иное, как, как я сказал, метод, который может также
передается в некотором параметре внутри методов обработчика.
Позже, когда мы посмотрим на формы, мы увидим двустороннюю привязку данных.
Таким образом, все три, что мы видели до сих пор, поток значения от
компонента к шаблону или свойство присваивается значению или
событие назначается обработчику для обработки события.
Все это то, что мы называем односторонними привязками данных, потому что
они протекают только в одном направлении.
Вы также можете иметь двунаправленный поток, где вы также можете увидеть его
в синтаксисе, который вы указали бы в квадратных скобках.
И затем заключен внутри, что со стандартной скобкой.
Внутри вы будете указать что-то вроде ngModel.
Вы увидите использование этого, когда он будет сформирован позже в следующем модуле.
Так вот, где вы назначите для этого свойство.
Таким образом, в данном случае информационный поток является двунаправленным.
Таким образом, любое изменение в вашем DOM будет отражаться обратно в вашем имуществе и
компонент.
Любое изменение свойства компонента будет отражаться обратно в DOM.
Обратите внимание на конкретный синтаксис, который мы используем для
, указав ngModel в этом примере.
Мы используем квадратную скобку и внутри которой мы используем стандартную скобку там.
Теперь позвольте мне резюмировать то, что мы только что узнали о
привязке данных в предыдущем слайде в этой таблице.
Таким образом, в этой таблице мы показываем различные способы использования привязки данных.
Односторонняя привязка данных из источника данных к цели представления, поэтому
из компонента к DOM,
мы используем выражение двойной скобки внутри.
Это то, что мы называем интерполяцией в качестве примера,
будет название блюда, заключенное внутри двойных скобок, как мы видели,
используется в упражнениях, в предыдущем модуле.
Тогда у нас есть, второй вид, где вы заключаете цель
в квадратную скобку, а затем присваиваете его выражению на правой стороне.
Эти выражения могут быть выражениями JavaScript с некоторыми ограничениями.
Примеры, которые мы обычно увидим, будут
, используя свойство одного из классов там.
Итак, это то, что мы называли атрибутом свойства, и
пример которого вы увидите в упражнении, которое следует за этой лекцией.
Где вы увидите использование блюдо, заключенное в квадратную скобку,
приравнивается к selectedDish, которая является переменной, объявленной внутри компонента.
Это также может быть выражено с помощью привязки цели,
способ выражения того же самого.
Таким образом, оба эти ли вы заключаете цель в квадратных скобках или привязку цели.
Так, например, можно увидеть связующие блюда.
Таким образом, каким бы вы ни выражали это, оба ссылаются на одно и то же.
Таким образом, указывается атрибут свойства или указывается стиль класса.
Теперь односторонний поток информации от цели представления до
источника данных обычно выражается с целью, заключенной
внутри круглых скобок, или может также быть выражен как on-target.
И с правой стороны было бы заявление.
Инструкция может быть своего рода выражением JavaScript, обычно
будет в вызове метода внутри компонента.
Ну вы увидите пример в упражнении, которое следует за которым
вы бы щелкнули внутри скобок и назначили onSelect.
Какой метод описан внутри класса компонента
там с параметром блюдо, поставляемым этому методу.
Двусторонняя привязка данных, как мы видели, будет с сквайром и круглыми скобками,
squire скобками и скобками, которые приравниваются к выражению.
Мы увидим двустороннюю привязку данных как набор с формами немного позже, где
вы будете использовать что-то вроде ngModel, заключенный в квадратные скобки и
круглые скобки, приравненные к чем-то вроде dish.name.
Который связывает элемент формы с свойством
объекта JavaScript, в нашем компоненте.
Вы также можете выразить это как связующие цели.
Это еще один способ сказать то же самое.
Теперь, это двустороннее связывание данных, которое мы делаем, иногда
jocully упоминается как банан в коробке.
Так что если вы посмотрите на квадратные скобки с круглыми скобками внутри них,
это выглядит как банан в коробке.
Таким образом, вы можете увидеть, что это используется в некоторых документах или
в некоторых блогах, которые вы можете прочитать в Интернете.
Расширяясь далее на связывающие цели, которые мы видели,
обязательные цели являются свойствами, которые объявлены на левой стороне
обязательной декларации этой обязательной привязки данных декларации.
Как правило, заключены в квадратные скобки или внутри круглых скобок или оба.
Таким образом, правая сторона выражения привязки - это их источники привязки,
, которые обычно похожи на свойства объекта JavaScript, или
переменная, или выражение, которое мы определяем с правой стороны.
При определении целевых свойств, связанных с выборочным компонентом.
Это один из способов передачи информации в компонент
или отправки информации из одного компонента в другой компонент.
Таким образом, это облегчает связь между компонентами.
Таким образом, вы увидите использование декоратора, такого как @Input, связанного с
, способ отправки информации из одного компонента в другой компонент.
Мы увидим пример этого использования в упражнении
, которое следует за этой лекцией здесь.
Аналогично, вы можете использовать декоратор вывода для указания события
из одного компонента, который передается обратно другому компоненту.
Таким образом, оба эти использования эффективно используются для связи между компонентами.
[МУЗЫКА]