Давайте продолжим работу над
одностраничным приложением, которое мы разрабатываем в наших упражнениях.
До сих пор мы интегрировали домашний компонент,
компонент меню и компонент контакта в наше одностраничное приложение.
Компонент детализации блюда в настоящее время используется в нижней части компонента меню.
Итак, когда вы нажимаете на любой из пунктов меню,
детали блюда отображаются прямо ниже в меню.
Теперь мы собираемся использовать еще одну поддержку, которую предоставляет модуль углового маршрутизатора,
, которая позволяет нам определить маршрут с параметром, включенным в определение маршрута.
Таким образом, мы можем передавать информацию другому компоненту
, а затем оттуда
отображать информацию в другом компоненте.
Как это работает?
Давайте узнаем это, выполняя это упражнение.
Итак, возвращаясь к нашему приложению
в данном приложении, когда вы смотрите в меню,
при нажатии на любой пункт в меню,
детали выбранного пункта отображаются прямо ниже в меню.
Теперь я хотел бы разделить вид деталей
этого конкретного блюда на свой собственный отдельный вид.
Когда я нажимаю на любой из них,
Я хочу иметь возможность отображать детали блюда,
конкретно в представлении в этом приложении.
Чтобы достичь этого, мы собираемся воспользоваться, как я уже сказал,
с параметрами маршрута, чтобы дать возможность
нам поддерживать такое поведение в нашем приложении.
Как нам это делать?
Давайте сделаем это, начав с определения нового маршрута с параметром здесь.
Чтобы использовать компонент детализации блюда,
мы перейдем в маршруты,
, а затем определим новый маршрут после меню здесь.
Посмотрите, как здесь определен маршрут.
Итак, это путь, dishdetail.
Итак, эта деталь блюда является частью компонента детализации блюда.
Итак, у него есть своя точка зрения.
Теперь я хочу иметь возможность перейти к этому представлению
, но с идентификатором параметра
, потому что этот вид детали блюда может отображать любое из блюд в моем меню.
Итак, я хочу иметь возможность отображать выбранное блюдо в деталях блюдо.
Теперь, это выбранное блюдо будет иметь идентификатор,
, и я хочу передать этот идентификатор в мое блюдо подробные компоненты,
, чтобы он мог отображать детали этого конкретного блюда.
Итак, в угловом маршрутизаторе
он поддерживает передачу параметров путем определения параметров маршрута, как это,
в определении самого маршрутизатора.
Итак, в пределах пути,
, если я скажу двоеточие,
, чтобы двоеточие могло сопровождаться именем, которое будет действовать как параметр маршрута.
Итак, в этом случае я собираюсь использовать имя параметра в качестве идентификатора.
Этот идентификатор относится к идентификатору блюда, которое мы уже дали каждому из наших блюд.
Теперь, это приведет меня к компоненту детали блюда.
Итак, мы добавим этот новый маршрут к определению Углового маршрута здесь.
Сохраните изменения.
Теперь, в компоненте меню,
поэтому, когда я открываю файл шаблона компонентов меню,
в компоненте меню,
Я показываю блюдо внизу здесь.
Так что я не хочу этого делать.
Итак, я собираюсь удалить эту часть из моего шаблона компонентов меню.
Вместо этого я понимаю, что прямо там,
я могу получить доступ к конкретному блюду.
Итак, когда блюдо нажата,
вместо этого нажмите здесь,
, поэтому я собираюсь удалить этот клик здесь, и вместо этого,
я собираюсь определить новый параметр здесь называется routerLink.
Вы увидите использование routerLink здесь.
Теперь этот routerLink принимает значения, которые вы можете указать в своем шаблоне, как это.
Итак, вы можете предоставить это как массив здесь.
Внутри массива вы можете предоставить две части массива.
Итак, блюдо.
Итак, вы видели, что когда я определял маршрут, я сказал «/dishdetail/:id».
Таким образом, угловой маршрутизатор будет передавать любой параметр, который я поставляю
здесь как часть второй части этого URL-адреса.
Итак, теперь, наряду с деталью блюда,
я собираюсь построить свой routerLink, используя деталь блюда,
, а также идентификатор блюда здесь.
Итак, этот идентификатор блюда относится к конкретному блюду, которое я выбрал
из массива блюд здесь.
Итак, это блюдо ID,
У меня есть доступ к нему здесь.
Итак, я собираюсь использовать это как вторую часть внутри этого массива параметров,
, что я собираюсь передать для моего routerLink здесь.
Итак, если я определяю его так,
тогда, когда я нажимаю на этот конкретный пункт в моем меню,
то, что подробно, идентификатор блюда,
вместе с этим dishdetail,
будет передан в качестве ссылки маршрутизатора.
Таким образом, эта информация теперь будет доступна через
мои угловые маршрутизаторы к моим деталям блюдо.
Таким образом, маршрутизатор позволяет компоненту детализации блюда извлекать это значение,
идентификатор блюда, из углового маршрута, когда эта информация передается в него.
Как мы это сделаем? Для этого
нам нужно перейти к компоненту детали блюда и исправить это до получения этой информации.
Итак, после внесения этих изменений в компонент меню
давайте теперь переключимся на компонент детали блюда.
Внутри компонента детали блюда
вы видите, что в настоящее время
я получал блюдо в качестве ввода здесь.
Я больше не буду получать блюда и входные данные.
Итак, я просто оставлю это как таковое,
как просто блюдо.
Мне больше не нужен ввод, потому что я не передаю эту информацию, используя блюдо,
в квадратных скобках, которые я включил в свой компонент меню.
Вместо этого эта информация о конкретных блюдах, поступающих через Угловой маршрутизатор.
Как получить доступ к этому идентификатору блюда?
Итак, чтобы сделать это,
я иду сюда.
В это приложение я собираюсь добавить еще два импорта здесь,
один из них называется Params.
Таким образом, этот Params дает мне доступ к
параметрам маршрутизатора, которые доступны, когда я прихожу.
Итак, это от углового маршрутизатора, Params,
, а также еще один, который мне нужен, это местоположение.
Location позволяет мне отслеживать местоположение
моей страницы в истории моего браузера.
Итак, это было бы полезно для меня, чтобы вернуться из моей детали блюда, когда мне это нужно.
Вы увидите, что я использую это немного позже.
Итак, две вещи, которые мне нужно импортировать: Params и Location.
Мы увидим, как мы используем эти два в нашем приложении.
Итак, вместе с этим
мы пойдем и здесь, для конструктора
теперь мы отмечаем, что значение блюда теперь не доступно из моего компонента меню.
Но вместо этого я должен явно пойти и извлечь это из DishService.
Итак, я собираюсь импортировать
DishService также в компонент детали моего блюда.
DishService здесь.
Итак, это позволит мне пойти и взять конкретное блюдо из Сервиса Блюда.
Итак, вы помните, что у нас уже есть
метод getDish и Сервис Блюда, который мы можем использовать.
Теперь, следующая важная вещь для нас, чтобы получить идентификатор блюда.
Теперь, как мы получить идентификатор блюда.
Итак, это где в конструкторе.
Теперь мне нужно сделать все эти услуги доступными,
, так что я скажу Блюдо Сервис.
Тогда, другой - Локация.
Итак, Местоположение - это еще одна услуга, которая доступна мне.
Таким образом, оба они будут использоваться в моем приложении.
Итак, когда этот компонент блюда инициализируется,
то в этот момент в ngOnInit,
я могу пойти и получить информацию о конкретном блюде из Params.
Итак, как нам это сделать? Итак, мы позволим id.
Итак, вот где я собираюсь получить идентификатор,
, так что я бы сказал плюс это.
Также, чтобы получить значение маршрута,
мне нужно ввести другую службу, называемую службой ActivatedRoute.
Это часть угловых маршрутизаторов.
Таким образом, эта услуга ActivatedRoute предоставляет мне доступ к маршруту здесь.
Итак, я бы сказал,
, поэтому вместе с DishService мне также нужно определить еще один называется
как маршрут, который будет сервисом ActivatedRoute здесь.
Итак, все эти три будут доступны мне.
Так что прямо там, я могу попросить
этот маршрут, снимок, Парамс.
This Params представляет собой массив
, который я могу индексировать, используя идентификатор в качестве значения, поэтому Params id.
Это извлекает мне идентификатор из параметра.
Итак, когда я определяю этот URL-адрес,
URL-адрес для этого будет определен как Dishдеталь.
Например, DishDetail 0,
DishDetail 1, DishDetail 2 и так далее.
Итак, вот как URL-адреса для этих компонентов будут определены там.
Итак, это значение я собираюсь принести здесь.
Теперь, как только я доберусь до идеи блюда, то я могу сказать,
это блюдо равно DishService
и получить блюдо и getDish будет принимать идентификатор в качестве параметра здесь.
Итак, с этим, когда я нажимаю на блюдо в моем компоненте меню,
, что ссылка, что у меня есть ссылка маршрутизатора, которую я установил там,
будет передавать идентификатор блюда моему маршрутизатору в качестве RouterParameter,
и который станет доступен мне в
мой компонент DishDetail, обратившись к ActivatedRoute сервис здесь.
Итак, как только я достану его,
, тогда я могу использовать это значение для запроса блюдо здесь.
Теперь, это не полный способ делать вещи.
Позже в следующем модуле
мы будем использовать что-то под названием Reactive JavaScript.
Затем, в этот момент, я вернусь, чтобы переопределить это в
по-другому, так что мой компонент DishDetail может отслеживать
любые изменения, которые я делаю в моем URL и
автоматически изменять информацию, отображаемую этим компонентом.
Мы подойдем к этому в одном из последующих упражнений в следующем модуле
, но на данный момент это отлично работает, поэтому мы собираемся использовать это.
Кроме того, теперь, когда я перехожу к деталям блюда
я хочу иметь возможность вернуться в меню из блюда.
Итак, я собираюсь добавить в свою карту кнопку «Назад» кнопку в мою карту,
, которая при нажатии приведет меня обратно в предыдущее место в моем браузере.
Итак, для этого я собираюсь добавить метод здесь, называемый GoBack,
, который по существу будет использовать
службы Location, которую я включил здесь.
Служба Location предоставляет метод под названием Back, который позволяет мне вернуться
к предыдущему элементу в истории браузера.
Итак, таким образом, я вернусь к меню из деталей здесь.
Итак, этот метод GoBack добавлен здесь.
Теперь нам нужно починить компонент DishDetail здесь.
Итак, в файле шаблона компонентов DishDetail
здесь у нас есть две кнопки, которые Like и Share кнопки.
Я собираюсь добавить еще одну кнопку здесь.
Для этой кнопки я бы добавил,
, если эта кнопка нажата,
это приведет к вызову метода GoBack, который я
только что добавил в свой DishDetail component.tsfile.
Итак, там будет кнопка «Назад».
Пока мы находимся на нем,
мы могли бы также исправить ссылки компонентов Footer.
Итак, перейдя в footercomponent.htmlfile внизу здесь, где у нас есть эти ссылки,
Я собираюсь добавить в RouterLink здесь с
параметр home для первого,
, а затем меню для второго,
и свяжитесь с нами для третьего в нижнем колонтитуле здесь.
Давайте сохраним изменения.
Перейдя в ваше приложение,
если вы теперь нажимаете на меню,
пункты меню отображаются здесь.
Если мы нажмем на любой из пунктов меню,
вы заметите, что детали блюда показаны в отдельном представлении здесь.
Эта информация, как вы можете видеть,
это именно то, что компонент DishDetail отображал ранее,
но в нижней части меню в компоненте меню,
теперь у нас есть, что отображение в отдельном представлении.
Теперь этот компонент DishDetail,
теперь вы можете вернуться в меню, нажав на кнопку Назад.
Итак, когда вы нажимаете на кнопку Назад,
вы возвращаетесь в меню.
Когда вы нажимаете на другой элемент,
вы видите, что детали этого конкретного элемента отображаются здесь,
аналогично для третьего тоже, а затем вы можете вернуться назад.
Теперь, когда вы нажимаете на любой из этих элементов,
обратите внимание на значение URL в адресной строке.
Итак, это локальный хост 4,200 косой чертой DishDetail 0.
Этот ноль является идентификатором этого блюда.
Итак, это значение передается в,
, и именно так компонент DishDetail здесь отображается здесь, вернитесь назад.
Когда вы нажимаете на другой элемент,
вы можете видеть, что теперь в URL говорит, DishDetail косая черта 1.
Аналогично, для четвертого,
он говорит, что DishDetail косая черта 3 и так далее.
Таким образом, это значение параметра указывает на
компонент DishDetail, какое конкретное блюдо
должно быть показано компонентом DishDetail.
Это то, что используется компонентом DishDetail для получения информации об
об этом конкретном блюде из DishService методом GetDish,
, а затем эта информация отображается в представлении компонента DishDetail.
Итак, теперь в этом упражнении
мы узнали, как мы можем использовать RouteParameters для передачи информации компоненту
, а затем компонент получает доступ к Параметру, а затем использует этот RouteParameter
, чтобы решить, как он отображает
представление или получить информацию и отобразить представление соответственно.
С этим мы завершаем это упражнение.
Мы почти завершили построение нашего одностраничного приложения
для ресторанного приложения, над которым мы работали до сих пор.
Это хорошее время для вас, чтобы сделать git commit с сообщением,
Одностраничное приложение часть 2.