[MUSIC]
Используя угловой маршрутизатор, мы уже узнали, как можно перемещаться
из одного представления в другой, используя директиву связи маршрутизатора, чтобы указать канал.
А также модуль маршрутизатора, позволяющий нам со спецификацией пути,
для навигации к представлениям различных компонентов.
Теперь давайте рассмотрим пример компонента dishdetail.
До сих пор компонент dishdetails работал, получая детали
конкретного блюда, которое он должен отображать из компонента меню.
Но это было облегчено, потому что компонент dishdetail имел свойство
, которое отправляло значение.
И затем мы использовали входной декоратор для
переменной внутри компонента dishdetail, чтобы получить значение, которое
передается из компонента меню.
Теперь, когда эти компоненты направляются на маршрутизатор,
это соединение между компонентами больше не существует.
Поэтому нам нужно использовать Угловой маршрутизатор, чтобы иметь возможность передавать
информацию от одного компонента к другому компоненту.
И это обычно делается в виде параметров.
Параметры, которые могут быть указаны как параметры маршрута,
, как мы узнаем немного позже, или параметры запроса.
Итак, для углового маршрутизатора, то, что мы узнали до сих пор
, заключается в том, что все пути указаны как URL.
Предположим, что вам нужно передать значение параметра из одного компонента в
другой компонент.
Тогда как нам это сделать?
Теперь единственный способ общения между компонентами
- это использование связи маршрутизатора.
И/или
используйте модуль маршрутизатора для перехода от одного компонента к другому.
Теперь, это где возможность указать значения параметров в URL для
компонента, путь для компонента, позволяет передавать эту информацию.
Так, например, если мы хотим иметь возможность отображать блюдо
с идентификатором 42 в компоненте dishdetail.
Если бы у нас была возможность указать что-то вроде /dishdetail/42.
И затем пусть dishdetail забрать номер 42 из URL напрямую.
Тогда мы облегчили механизм передачи этой информации
один компонент другому компоненту, когда мы переходим к другому компоненту.
Это то, что в модуле углового маршрутизатора называется параметром маршрута.
Как работает параметр маршрута?
Таким образом, когда вы указываете параметр маршрута в определении пути,
этот параметр маршрута задается с помощью маркера.
Поэтому, когда вы указываете путь в спецификации пути для
маршрутов, вы указываете такой путь.
Так вы бы сказали, dishdetail/:id.
Таким образом, где id становится маркером, который несет параметр маршрута
к конкретному компоненту.
Компонент dishdetail в этом примере.
Таким образом, вы можете указать параметр маршрута в пути.
А затем из другого места можно передать параметр
конкретному компоненту, которому нужен этот параметр.
Компонент dishdetail в этом примере.
Теперь следующий важный вопрос, который возникнет в вашем сознании, -
как мы передаем этот параметр маршрута?
Теперь, когда вы подумаете об этом, когда вы перемещаетесь по компоненту dishdetail.
Вы приходите из другого компонента, либо щелкнув ссылку, либо используя
что-то, называемое функцией навигации, как модуль маршрута предоставляет для нас.
Рассмотрим оба способа перехода к определенному компоненту.
Теперь, если вам нужно указать параметр маршрута, при указании ссылки,
напомним, что мы указывали ссылку с помощью директивы router link
в наших файлах шаблонов.
Теперь, если вы собираетесь указать это в файлах шаблонов,
, то ссылка маршрутизатора также принимает в массив, как мы видим.
Массив параметров связи,
, где можно явно указать передаваемый параметр.
Так, например, в этом примере, который вы видите здесь, мы указываем.
А затем вы делаете ngFor.
Таким образом, вы просматриваете набор объектов JavaScript в
массиве объектов JavaScript.
Затем при указании маршрутизатора ссылка.
Таким образом, внутри вы можете указать ссылку маршрутизатора.
Но теперь, в окружении квадратных скобок.
И это будет принимать значение, подобное этому, имеет массив параметров ссылки.
Таким образом, здесь вы можете указать различные части параметра link.
И Угловой маршрутизатор объединит их вместе, чтобы сформировать фактический URL.
Итак, здесь вы можете видеть, что первая часть параметра link указана
как строка здесь, поэтому /dishdetail здесь.
Но вторая часть указана как значение, которое получается
из блюда.
Что такое блюдо, объект JavaScript из массива объектов JavaScript здесь.
Таким образом, каждое блюдо будет нести dish.id.
Таким образом, dish.id может быть указан как
одно из значений в этом массиве параметров ссылки здесь.
Поэтому, когда вы нажимаете на это, для конкретного блюда,
это dish.id будет заменено конкретным идентификатором для блюда.
Так, например, если id 42, то это будет заменено на 42.
Поэтому, когда Угловой маршрутизатор получает эту ссылку маршрутизатора,
, то он будет строить URL как /dishdetail/42.
The 42 является значением dish.id на данный момент.
Так вот как вы можете передать параметр.
Вторая часть вопроса, конечно,
- это как компонент извлекает это значение из параметра link?
О чем мы поговорим на следующем слайде.
Другой способ, который вы можете вызвать эту навигацию к другому компоненту
, - это также использовать метод навигации, предоставляемый модулем маршрутизатора.
Так вы можете сказать, это.router.navira-навигация.
Таким образом, это может быть включено в ваш код TypeScript или
ваш код JavaScript, чтобы автоматически вызвать навигацию к другому.
Таким образом, это может быть включено в метод, который вы
включаете в код TypeScript вашего компонента.
И это можно вызвать из вашего шаблона.
Скажем, например, нажав на ссылку там.
Таким образом, внутри кода вы можете включить такой оператор, как это,
this.router.naviation.
И этот метод навигации принимает тот же массив параметров связи
, что и значение параметра.
Таким образом, это также позволит предоставить эту информацию угловатому маршрутизатору, чтобы
мог перейти к другому компоненту.
Теперь давайте перейдем к другой стороне этого уравнения.
Как компонент, как компонент dishdetail в этом примере,
извлекает это значение, указанное в качестве маркера в URL-ссылке?
Теперь здесь библиотека углового маршрутизатора предоставляет
услугу, называемую службой ActivatedRoute.
Эта служба ActivatedRoute может быть использовано для получения
этих значений.
Теперь, в частности, для облегчения извлечения этого параметра,
сервис ActivatedRoute предоставляет три разных вещи.
Например, он предоставляет этот метод для получения URL-адреса.
Который является наблюдаемым из пути маршрута.
Который представлен в виде массива строк для каждого пути маршрута.
Вы столкнулись с этим словом, наблюдаемым здесь.
На данный момент, держись за это слово.
Мы вернемся, посмотрим, что такое наблюдаемое в следующем модуле.
Но на данный момент мы поняли, что эта служба
ActivatedRoute обеспечивает эту наблюдаемую.
Аналогичным образом, служба ActivatedRoute также предоставляет еще один наблюдаемый называется params.
Этот наблюдаемый параметр делает доступным компоненту
значения параметров, которые передаются в качестве параметра маршрута.
Таким образом, этот параметр наблюдаемый является тот, который мы собираемся использовать
для извлечения этого значения в компоненте dishdetail.
Вы увидите точный метод этого
в упражнении, которое следует за этой лекцией.
Аналогично, вы также можете передать параметры запроса другому компоненту.
Сейчас мы не будем разбираться с примером параметров запроса прямо сейчас.
Но позже мы можем столкнуться с примером того, как вы можете передать параметры запроса
через службу ActivatedRoute другому компоненту.
С таким пониманием, давайте перейдем к следующему упражнению.
Мы продолжим разработку одностраничного приложения.
А затем включить использование параметра маршрута, чтобы передать в
идентификатор блюда компоненту dishdetail.
Так что компонент dishdetail, в свою очередь, может использовать этот идентификатор для запроса блюдо службы.
Чтобы получить детали этого конкретного блюда, которое оно
должно отображаться в его представлении.
[МУЗЫКА]