Теперь, когда вы промокли ноги с Угловыми наблюдаемыми в предыдущем упражнении,
вы оглядываетесь назад и говорите:
«О наблюдаемые не так уж плохи в конце концов,
они довольно просто использовать».
Итак, мы становимся немного более амбициозными.
Давайте пойдем на один шаг дальше, а затем использовать встроенный наблюдаемый в Angular.
Наблюдаемые параметры, которые поступают от
активированного сервиса маршрутизации в нашем модуле маршрутизатора.
Теперь мы обновим компонент детализации блюда
, чтобы использовать параметры наблюдаемые от
службы активатора засухи, чтобы
поддерживать некоторые новые функции в нашем угловом приложении.
Прежде чем мы перейдем к обновлению компонента детали блюда,
я хочу ввести еще один метод в моем файле блюдо service.ts.
Так открыть блюдо service.ts файл, а затем мы добавим новый метод под названием
getDishIds и это в основном будет
вернуть все идентификаторы блюда для всех блюд в нашей коллекции блюд.
Итак, чтобы сделать это, мы будем использовать возврат
и метода, и прежде чем я это сделаю,
это возвращает наблюдаемый.
Какого рода?
Это возвращает наблюдаемый, который состоит из массива
строки и отложим
его на 2 000 миллисекунд или две секунды.
Итак, что мы хотим вернуть?
Мы хотим взять массив посуды,
извлечь все идентификаторы из массива посуды и
затем дать его нашему компоненту Dish Detail,
, потому что нам нужно, чтобы в нашем компоненте Dish Detail реализовать
новую функцию, которую мы собираемся поддерживать в нашем приложении.
Теперь, это один из способов, которым я хочу его реализовать.
Позже мы видим, как мы можем сделать это гораздо лучше,
в одном из последующих упражнений.
На данный момент, с тем, как сервис реализован,
это лучшее, что я мог бы сделать, чтобы реализовать это решение, чтобы продемонстрировать новую функцию.
Итак, в пределах наблюдаемого,
то, что я собираюсь сделать, это,
я собираюсь взять массив посуды и массив посуды.
Я собираюсь использовать карту,
оператор массива, карту оператора массива JavaScript.
Итак, оператор карты,
, как это работает, заключается в том, что он принимает каждый элемент из массива посуды, и мы можем сопоставить
этот элемент в другой элемент, а затем построить
другой массив, а затем вернуть этот модифицированный массив.
Итак, для каждого элемента в моем массиве посуды
я собираюсь взять этот пункт, а затем вместо
извлечь идентификатор блюда, а затем из идентификатора блюда.
Итак, я буду строить новый массив из него,
, который содержит только идентификаторы,
так массив идентификаторов, и мы уже видим, что идентификаторы являются строкой,
это то, что я собираюсь вернуть из моего идентификатора блюда здесь.
Вот и все, оператор массива карт.
Если вы посмотрите на операторов массива JavaScript,
вы увидите, что делает оператор массива карты.
Действительно, оператор массива карты также
интересен с точки зрения наблюдаемых,
потому что наблюдаемый, как вы видели,
также можно рассматривать как массив,
поток значений,
который можно рассматривать как массив.
Таким образом, оператор карты также может быть использован в наблюдаемых.
Но в данный момент я использую его просто как оператор массива JavaScript.
Давайте сохраним изменения.
Теперь мы перейдем к компоненту Детализация Блюда, а затем обновим компонент Детализация Блюда.
Теперь, в компоненте Деталь Блюда,
вместе с блюдом,
я собираюсь объявить переменную dishIds,
который является массивом строк.
Это dishIds будет хранить все идентификаторы
все блюда, которые находятся в моей коллекции блюд в моем меню.
Тогда я также буду иметь
еще две переменные, называемые предыдущей и следующей строки типа.
Теперь, зачем мне это нужно?
Это станет немного яснее,
, как только вы реализуете представление,
, где я собираюсь использовать это.
Теперь, что я буду делать здесь, это то, что
внутри моего ngInit раньше,
мы сделали, чтобы id равен плюс этот идентификатор параметров route.snapshot.
Когда я делал это в предыдущем упражнении,
я не объяснял вам, что делает снимок и почему мы делаем это так?
Потому что вам нужно было понять наблюдаемые,
, прежде чем вы поймете, что означает снимок.
Теперь, в Angular, активированный сервис маршрутов предоставляет набор наблюдаемых.
Один из наблюдаемых называется params.
То, что эти параметры предоставляют нам,
- это способ получения значений параметров в моем URL.
Итак, вы увидели, что при введении параметров маршрута
вы ввели один из параметров маршрута в качестве двоеточия.
Этот идентификатор двоеточия становится доступным как наблюдаемый.
Итак, всякий раз, когда это значение изменилось,
вы можете наблюдать изменения в этом значении, а затем принимать соответствующие меры.
Но раньше, когда мы реализовали компонент детализации блюда,
мы не знали о наблюдаемых.
Итак, я не мог объяснить, что делал снимок в тот момент.
Теперь позвольте мне вернуться и объяснить, что именно делает снимок.
Когда мы используем это как моментальный снимок здесь,
то, что мы делаем, это,
мы берем один снимок из
маршрутной службы, а затем мы получаем
параметр наблюдаемый в этот конкретный момент времени.
Значение параметров в этот конкретный момент
времени, а затем использование его в нашем приложении.
Хотя это не идеальный способ сделать это.
Вместо этого давайте использовать наблюдаемый
напрямую, а затем реагировать всякий раз, когда это наблюдаемые изменения.
Итак, как мы обновляем этот код, чтобы использовать наблюдаемый напрямую?
Итак, мы понимаем, что из активированного маршрутного сервиса
у нас есть доступные параметры.
Таким образом, мы будем использовать параметры наблюдаемых и
в любое время есть изменение, где параметры наблюдаемые,
мы можем инициировать изменение в рамках нашего компонента DishDetail.
Позвольте мне проиллюстрировать вам, как мы будем использовать
параметры, наблюдаемые путем обновления этого кода.
Итак, перейдя к этому коду,
то, что я собираюсь сделать сейчас,
заключается в том, что я собираюсь изменить это, сказав:
«У меня есть этот маршрут и с этого маршрута,
у меня уже есть параметры».
Итак, я собираюсь удалить снимок, и я использую параметры.
Итак, с этими параметрами
то, что у меня теперь есть доступ к парамам наблюдаемых.
Теперь, поскольку у нас есть эти параметры наблюдаемые,
я собираюсь использовать оператор на этих наблюдаемых парамах, а затем модифицировать его.
Итак, оператор, который я собираюсь использовать, называется оператором switchMap.
Оператор switchMap позволяет мне
использовать наблюдаемые параметры, и вы видите красную линию squiggly, что означает,
, что мне нужно импортировать switchMap, наблюдаемый здесь.
Итак, я перейду к
мои входы здесь и
, затем я буду вводить rxjs и оператор.
Итак, из наблюдаемых параметров
я получаю параметры, которые имеют тип Params.
Итак, помните, что здесь мы импортировали параметры из библиотеки маршрутизатора.
Итак, мы умоляли параметры здесь,
из библиотеки маршрутизатора, а также импортировали сервис маршрута активации здесь,
, а затем сделали их доступными в нашем конструкторе здесь,
через маршрут активации.
Итак, вот почему мы можем сделать этот маршрут параметры, чтобы получить параметры наблюдаемых.
Я собираюсь использовать оператор switchMap на парамах
наблюдаемых, а затем, когда я получаю наблюдаемые параметры,
то, что я собираюсь сделать, это взять это, а затем сказать, это dishService.
GetDish, а затем этот идентификатор теперь должен быть получен с помощью параметров.
Вы видите параметр, который у нас есть.
Из параметров, я скажу в скобках ID.
Итак, что происходит, так это то, что всякий раз, когда наблюдаемые параметры изменяют значение,
, что означает, что параметр маршрута изменяет значение, то немедленно
оператор карты коммутатора будет принимать значение параметров,
, а затем делать getDish из моего dishService.
Таким образом, это будет автоматически инициировано,
и это будет доступно как другой
наблюдаемый, который испускается, выполняя этот оператор карты переключения на этом наблюдаемом.
Итак, мы создаем новый наблюдаемый, который является getDish,
, который собирается вернуть объект блюда здесь.
Теперь, как только мы получим getDish там,
, то это теперь может быть доступно как наблюдаемый.
Я просто подписываюсь на это наблюдаемое, используя подписку здесь.
Затем я получаю блюдо.
Это блюдо получается, делая это getDish здесь.
Это блюдо, тогда я могу использовать, чтобы сопоставить его в
мою переменную блюда, которую я объявил ранее.
Итак, таким образом, мое блюдо теперь обновляется.
Итак, в любое время, когда параметры наблюдаемые изменения,
мое блюдо будет обновлено до нового блюда.
Итак, обратите внимание, как я принимаю один наблюдаемый, параметры наблюдаемые,
, а затем я сопоставляю параметры наблюдаемые в другой наблюдаемый, который в основном
собирается в извлечению значения блюда из моего dishService,
, а затем делая это доступным как наблюдаемый.
Затем я подписываюсь на это наблюдаемое здесь, а затем,
я получаю значение блюда здесь,
, а затем я сопоставляю значение блюда или скорее
делая переменную блюда равной значению блюда здесь.
Обратите внимание, как с помощью наблюдаемых,
вы теперь можете взять один наблюдаемый, а затем сопоставить его в другой наблюдаемый.
Почему это интересно?
Если сейчас, у меня есть способ изменить этот параметр маршрута,
, то я смогу переключаться между разными блюдами и видеть разные блюда.
К сожалению, у меня этого нет.
Итак, мне нужно изменить компоненты блюда, чтобы я мог это сделать.
Теперь, вот где я включу пару кнопок в свой взгляд, которые, когда я нажимаю,
я смогу перемещаться по моему списку блюд.
Теперь, чтобы иметь возможность перемещаться по моему списку блюд,
Мне нужно знать набор всех моих блюд,
или, по крайней мере, мне нужно знать идентификаторы всех моих блюд.
Вот почему я использую эту посуду здесь, ясно?
Итак, теперь вы видите, почему я включил метод dishIds в свой dishService.
Итак, тогда я начинаю.
Я собираюсь сначала получить
dishIds по
, вызывающий dishService,
getDishIds метод в этот момент.
Я все еще работаю со старым способом делать вещи.
Я должен осознать, что этот getDishIds отправляет в наблюдаемый.
Итак, мне нужно подписаться на это наблюдаемое.
Вы видите, как вам нужно изменить свой образ мышления, когда
вы работаете с переменными здесь.
Итак, мы бы сказали dishIds subscribe,
и внутри subscribe,
мы получим параметр, который является строковым массивом,
, а затем я бы сказал прямо там,
dishIds будут равны dishIds.
Смотрите, как легко
изменить свой образ мышления, когда вы хотите иметь дело с наблюдаемым.
Итак, getDishIds отправляет наблюдаемый,
, и я подписываюсь на это наблюдаемое, а затем у меня есть dishIds здесь доступны.
Затем, также подписавшись на параметр.
Если я могу изменить свой параметр,
значение параметра маршрута в моем коде,
, то я смогу перемещаться среди блюд.
Итак, давайте воплотим эту часть.
Это становится интересным.
Итак, чтобы я мог это сделать,
, поэтому я введу еще один метод, называемый setPrevNext,
, и к этому я отправлю параметр dishId.
Теперь, учитывая мой текущий dishId,
я хотел иметь возможность найти предыдущий и следующий dishId, чтобы я мог реализовать
мою навигацию между блюдами в моем компоненте dishdetail.
Так вот, по этой причине я объявил прев и следующий.
Теперь мне нужно иметь возможность инициализировать эти два значения.
Все, что я знаю сейчас, это мое блюдо.
Итак, используя текущий dishId,
я хочу иметь возможность найти предыдущий и следующий dishId.
Итак, в этом методе
я собираюсь сделать предыдущий и следующий dishId.
Итак, вот я скажу,
пусть индекс равен этому dishIds.
Теперь я знаю только идентификатор моего блюда,
но идентификатор моего блюда не дает мне всего.
Мне нужно иметь возможность найти блюдо в этом массиве идентификаторов
, поэтому я говорю это dishIds, и indexOf.
Вы должны знать оператор indexOf в массиве JavaScript.
Оператор indexOf принимает значение, а затем находит индекс этого значения в массиве.
Итак, indexOf и параметр здесь,
я дам это dishId,
dishId, который я получу за короткое время.
Теперь, как только я получу индекс этого текущего значения,
я могу затем сопоставить
два предыдущих dishIds.
Итак, вот где я
сделаю немного сложного кода здесь, который позволит мне обернуться, когда я буду.
Итак, обратите внимание, что этот массив dishIds содержит определенное количество значений.
Если мое текущее значение моего dishId является первым элементом,
, то предыдущее значение будет индексированным нулем элементом в моем массиве.
Но если мое текущее значение является нулевым элементом,
самым первым элементом в моем массиве,
, я хочу обернуться, чтобы получить последний элемент в моем массиве.
Итак, вот где я использую оператор modulo с
некоторый математический способ обертывания вещей вокруг.
Итак, я бы сказал, что это dishId
плюс индекс минус один, и по модулю длина этого блюда.
Итак, что я делаю,
предыдущее значение будет текущим индексом,
индексом текущего значения,
плюс длина блюд минус один.
Теперь, если индекс один,
индекс минус один даст мне ноль.
Если индекс равен нулю,
индекс минус один даст мне минус один,
но это не то, что я хочу.
Я хочу обернуть вокруг и получить dishId длину минус один.
Итак, вот почему я включаю это там,
, а затем делаю модуль с dishIds.
Итак, когда индекс равен нулю,
я обернусь, чтобы получить последний элемент в моем массиве.
Итак, вот как я инициализирую предыдущее значение.
Затем следующее значение
Я буду использовать тот же подход,
, но обернуться, говоря индекс плюс один.
Итак, если я в настоящее время нахожусь на последнем элементе в массиве,
, то я хочу обернуть до нуля.
Итак, это другая часть того, что я делаю.
Итак, там, я устанавливаю предыдущий и следующий.
Итак, когда я должен установить предыдущий и следующий?
Каждый раз, когда мое блюдо меняется,
мне нужно иметь возможность инициировать звонок к этому.
Теперь, где я меняю свою ценность блюда?
Оглядываясь назад на подписку здесь,
обратите внимание, что прямо там,
вы меняете свое блюдо каждый раз, когда наши параметры меняются.
Итак, в этот момент
я хочу сбросить мое предыдущее и следующее значение.
Итак, я собираюсь изменить это в блок кода здесь.
Тогда я бы сказал, что это setPrevNext,
, а затем параметр будет dishId.
Вот оно. Итак, с этим изменением,
что происходит каждый раз, когда мое блюдо обновляется,
я обновлю предыдущее и следующее также соответственно отсюда.
Итак, с этим небольшим изменением,
мое блюдо будет текущим.
Предыдущее будет указывать на предыдущее блюдо,
и следующее будет указано на следующее блюдо.
Итак, у меня есть все три, что мне нужно.
Теперь я могу использовать эти три значения, чтобы реализовать способ навигации
среди блюд в моем шаблоне, включив пару кнопок в мой шаблон.
Итак, давайте перейдем к шаблону компонентов dishdetail
, а затем включим пару кнопок, которые позволяют мне перемещаться среди блюд.
Перейдя к компоненту Dish Detail, пока я здесь,
позвольте мне взять этот ngIf с этой карты, а затем переместить его в div там.
Я хочу скрыть весь div,
, когда мое блюдо в настоящее время не дефект,
аналогично для комментариев также.
Я нахожу, что это немного обжаривает
, когда информация о блюде извлекается с сервера.
Итак, я сделаю это изменение для обоих divs, которые
один показывает комментарии, а другой показывает детали блюда в карточке.
С этими двумя обновлениями,
внутри моей карты действий,
Я собираюсь включить
еще одну кнопку типа кнопки очевидно и эта кнопка,
я включу routerLink.
В тот момент, когда вы видите ссылку маршрутизатора,
вы сразу говорите: «О,
я знаю, что вы пытаетесь сделать.
Вы пытаетесь преобразовать эту кнопку, чтобы иметь возможность перемещаться между
различными компонентами в моем сервисе.»
Итак, для routerLink,
я собираюсь предоставить массив значений и массив значений для routerLink,
Я собираюсь сделать dishdetail.
Также вторая часть.
Видишь, это интересная часть.
Вторая часть этого массива будет prev,
, которая является переменной, которую я объявил в своем компоненте.
Итак, при этом эта кнопка станет ссылкой на предыдущее блюдо в моем списке блюд.
Спиффи, верно?
Итак, с этим, что еще?
Позвольте мне закрыть кнопку здесь, а затем внутри кнопки,
Я собираюсь использовать шрифт Awesome значок
фа шеврон слева.
Так вот и все. Эта кнопка будет кнопкой с иконкой.
Итак, теперь у нас есть одна кнопка здесь,
Я также собираюсь включить еще одну кнопку здесь.
Прежде чем включить кнопку,
я буду делать span класса flex-spacer,
вы видели меня с помощью гибкого распора в одном из предыдущих упражнений.
Итак, вы видите, что я делаю,
Я растягиваюсь, чтобы включить вторую кнопку.
Итак, для второй кнопки
Я просто собираюсь скопировать это
, а затем вставить его туда, а затем обновить этот, чтобы сказать prev.
Вместо предыдущего я пойду дальше, а затем
фа-шеврон влево на фа-шеврон вправо, и все.
Давайте сохраним изменения в наших компонентах Dish Detail,
, а также остальные файлы.
После этого обновления, давайте пойдем и посмотрим, что делает наше приложение.
Перейдя в мое приложение в браузере,
перейдем к компоненту Menu.
Мы видим Меню и давайте выберем один пункт из Меню здесь.
Итак, обратите внимание, что теперь этот пункт из меню блюда отображается здесь.
Обратите внимание внизу,
у нас есть две кнопки здесь, слева и справа.
Когда мы нажимаем на левую кнопку,
обратите внимание, как мы можем перейти к предыдущему блюду в списке блюд.
Я могу продолжать делать влево снова и продолжать навигацию влево и вправо.
Обратите внимание, что когда я это делаю,
мое фактическое представление не перезагружается,
вместо этого я буду только извлекать
данные, связанные с блюдом из службы, а затем обновлять мое представление здесь.
Причина, по которой мы можем сделать это, заключается в том, что у нас
есть наблюдаемые, параметры наблюдаемые.
Итак, в любое время, когда я нажимаю на этих двух,
влево и вправо, параметры наблюдаемые,
обратите внимание, как в этот момент адрес показывает dishdetail ноль.
Если я нажму справа,
, то это будет обновлено от dishdetail нуля до dishdetail одного.
Это изменение параметра, и это приведет к тому, что мой наблюдаемый
пойти и получить новое блюдо из сервисного обслуживания.
Затем извлекается новое блюдо,
переменная блюда в моем компоненте обновляется,
, и когда это обновляется,
мое представление также обновляется.
Итак, обратите внимание, что я использую тот же вид,
Я могу перемещаться среди различных блюд, которые являются частью моего списка блюд.
Это интересная часть, которую вы можете получить, используя параметры
наблюдаемые из activator.service в вашем угловом приложении.
Интересный способ использования наблюдаемых счетов нашего углового приложения.
Конечно, то, как я его реализовал,
я сделал это немного надуманный способ делать вещи.
Мне пришлось достать список идентификаторов блюд.
Мне пришлось изменить предыдущий и следующий и так далее.
Если у вас был способ получить предыдущее
и следующее значение автоматически от вашего сервиса,
всякий раз, когда вы получаете блюдо,
то реализация партитуры станет немного проще.
Сейчас у нас этого нет.
Итак, я работал над проблемой, потому что я просто хотел проиллюстрировать способ
использования наблюдаемого в вашем угловом приложении.
Если мы сможем реализовать сервис, который будет возвращать
предыдущее и следующее значение всякий раз, когда мы берем блюдо,
то вся эта головная боль будет намного проще решена.
Давайте отложим эту идею на более поздний этап.
Но на данный момент вы видите, как мы делаем
использование наблюдаемых параметров для того, чтобы реализовать
интересный способ поддержки новой функции в нашем угловом приложении.
Это завершает это упражнение.
Это хорошее время для вас, чтобы сделать git commit с сообщением RXJS Часть вторая.