Angular роутинг получение параметров роута с помощью route params в версии 2


Содержание материала:

Как передать параметры маршрута в [routerLink] angular 2

Я пытаюсь создать приложение с помощью angular 2, а вы хотите передать параметры, чтобы пометить a в [routerLink], я хочу, чтобы у вас была такая ссылка:

Я не знаю, как передать cell в шаблон.

Если вы собираетесь использовать angula2 beta​​strong > , тогда вам нужно отправить такой параметр при выполнении маршрутизации.

а не в принимающей стороне, то вам нужно получить параметр с помощью RouteParams .

если вы собираетесь использовать angular2 RC, вместо использования RouteSegment вместо RouteParams в angular2 RC. вот так: —

Вы можете работать с queryParams , который работает с routerLink , чтобы построить url . Для примера:

Angular 2: получение RouteParams из родительского компонента

Как получить RouteParams из родительского компонента?

И затем, в ParentComponent , я могу легко получить свой параметр имени пользователя и установить дочерние маршруты.

Но тогда, как я могу получить этот же параметр «имя пользователя» в этих дочерних компонентах? Выполнение того же трюка, что и выше, не делает этого. Поскольку эти параметры определены в компоненте ProfileComponent или что-то??

UPDATE:

Теперь, когда окончательный Angular2 был официально выпущен, правильный способ сделать это:

ORIGINAL:

Вот как я это сделал, используя «@ angular/router»: пакет «3.0.0-alpha.6»:

В этом примере маршрут имеет следующий формат:/parent/: id/child/: childid

Вы не должны пытаться использовать RouteParams в ChildOneComponent .

ОБНОВЛЕНИЕ: Как из этого запроса на растяжение (angular beta.9): https://github.com/angular/angular/pull/7163

Теперь вы можете получить доступ к текущей инструкции без recognize(location.path(), []) .

Я еще не пробовал, но

ОБНОВЛЕНИЕ 2: Небольшое изменение от angular 2.0.0.b15:

Теперь currentInstruction больше не является функцией. Кроме того, вам нужно загрузить маршрутизатор root . (спасибо @Lxrd-AJ за отчетность)

Как упоминал Гюнтер Зёчбауэр, я использовал комментарий https://github.com/angular/angular/issues/6204#issuecomment-173273143 для решения моей проблемы. Я использовал класс Injector из angular2/core , чтобы получить параметры маршрутизации родителя. Выключается angular 2 не обрабатывает глубоко вложенные маршруты. Возможно, они добавят это в будущем.

Я нашел уродливое, но рабочее решение, запросив инжектор родителя (точно второго предка) и получив RouteParams отсюда.

RC5 + @ angular/router «:» 3.0.0-rc.1 РЕШЕНИЕ: Кажется, что this.router.routerState.queryParams устарел. Вы можете получить параметры родительского маршрута следующим образом:

Вы можете взять компонент родительского маршрута внутри дочернего компонента из инжектора, а затем получить любой из дочернего компонента. В этом случае

Передача экземпляра Injector в конструктор в дочернем компоненте может быть не очень хорошей, если вы хотите написать модульные тесты для вашего кода.

Самый простой способ обойти это — создать класс обслуживания в родительском компоненте, в котором вы сохраните требуемые параметры.

Затем вы просто вводите одну и ту же услугу дочерним компонентам и получаете доступ к параметрам.

Обратите внимание, что вы должны обладать такой службой родительскому компоненту и его дочерним компонентам, используя «поставщиков» в декораторе родительских компонентов.

Проблема при выборе параметров маршрута с помощью route.snapshot

У меня есть маршрут с динамическим сегментом пути

Так что в моем клиентском компоненте я извлекаю это, используя id: номер;

Так же как и журналы консоли «Id: 1 «когда я иду по этому маршруту из другого компонента, или он работает правильно, когда я иду по этому маршруту в первый раз» localhost: 4200 / Customers / 1 «, но проблема возникает. Я написал ссылку в файле customer.html

. При переходе по этой ссылке URL-адрес меняется на «localhost: 4200 / Customers / 2», но журнал консоли не работает, он не показывает «Идентификатор : 2 «нет консольного журнала. Моя проблема, почему это происходит? URL-адрес уже изменился, но ngOninit не работает. Можете ли вы помочь мне решить эту проблему

Маршрутизация Angular Подробное руководство

Свойства Routes

  • path — путь для маршрута
  • component — компонент для URL
  • pathMatch — задает соответствие URL свойству PATH (‘ full ‘, ‘ prefix ‘); свойство обязательно при наличии redirectTo
  • redirectTo — редирект на другой URL
  • children — для задания дочерних маршрутов, которые отображают дополнительные компоненты во вложенных элементах router-outlet , содержащихся в шаблоне компонента активации
  • outlet — для поддержки множественных компонентов outlet
  • resolve — определяет действия, которые должны быть совершены перед активацией маршрута
  • canActive — управляем активацией маршрута
  • canActiveChild — управляем активацией дочернего маршрута
  • canDeactivate — управляем тем, когда маршрут может деактивироваться для активации нового маршрута
  • loadCildren — для настройки модуля, который загружается только в случае необходимости
  • canLoad — загрузка модулей по требованию

Порядок настройки роутинга

Директивы RouterOutlet

Именно корневой компонент обеспечивает навигацию между разными компонентами. RouterOutlet — директива ( ) станет заполнителем, где роутер отобразит view (при этом все предыдущие компоненты будут удалены).

Именованные элементы router-outlet

router-outlet может быть несколько. Отсюда следует, что по одному маршруту можно вывести несколько компонентов, загрузив их в разные router-outlet .

Чтобы отличать элементы router-outlet используется атрибут name . router-outlet без атрибута name является первичным, что равносильно outlet: «primary» .

Топ-пост этого месяца:  CMS 1C-Битрикс быстрый старт

Элемент base

Элемент base задает URl, с которым будут сравниваться пути маршрутизации.

Директива routerLink

Директива routerLink приказывает Angular выбрать в качестве целевого маршрута результат значения(выражения) директивы routerLink .

Выражения для routerLink задаются в виде массива, значения которого соответствуют каждому конкретному сегменту.

Директива routerLinkActive


Для стилизации активных ссылок применяется специальная директива routerLinkActive . Активная ссылка с директивой [routerLink] получает класс router-link-active .

routerLinkActive по умолчанию выполняет частичный поиск совпадения для активных URl. Однако это можно регулировать: если exact равно true , то происходит полное сопоставление URl.

Служба ActivatedRoute и параметры маршрута

ActivatedRoute — содержит информацию о маршруте связанную с компонентом, который загружен в outlet .

Свойство ActivatedRoute

snapshot — возвращает объект ActivatedRouteSnapshot , который описывает текущий маршрут.

Свойства ActivatedRouteSnapshot

  • url — возвращает массив объектов URLSegment , каждый из которых описывает один сегмент URl-адреса для текущего маршрута
  • params — возвращает объект Params с описанием параметров URl
  • queryParams — возвращает объект Params с описанием параметров запроса URl
  • fragment — возвращает объект string, содержащий фрагмент URl

Свойства URLSegment

  • Path — строка со значением сегмента
  • parameters — индексированная коллекция параметров

Маршрут вида ‘ item/:id ‘ будет соответствовать любому URl-адресу из двух сегментов, первый из которых будет содержать item . Второй сегмент будет содержать значение, которое присвоится параметру с именем id . Mы сможем обратиться к компоненту с запросом типа /item/7 , и число 7 будет представлять параметр id .

Реагируем на текущие изменения навигации при помощи ActivatedRoute

Свойства класса ActivatedRoute относящиеся к Observable:

  • url — возвращает Observable : набор сегментов URl при изменении маршрута
  • params — возвращает Observable

: набор параметров при изменении маршрута
queryParams — возвращает Observable

: набор параметров запроса при изменении маршрута

  • fragment — возвращает Observable : фрагмент URl при изменении маршрута
  • Множественные параметры и routerLink

    Mы сможем обратиться к компоненту с запросом типа /item/edit/7 :

    Выражения для routerLink задается в виде массива, значения которого соответствуют каждому конкретному сегменту.

    Дополнительные(необязательные) параметры маршрута

    В браузере: http://localhost:3000/products/1/edit;name=John;city=Moscow

    Получить в компоненте можно точно также как и для основных параметров (см. пример выше).

    Класс Router

    Класс Router предоставляет доступ к системе навигации из компонентов.

    Свойства и методы Класса Router

    • navigated — возвращает true , если было хотя бы одно событие навигации, иначе false .
    • url — возвращает активный URl-адрес
    • isActive(url, exact) возвращает true , если заданный URl совпадает с URl, определенным активным маршрутом.
    • events — возвращает объект типа Observable , который может использоваться для отслеживания навигационных изменений.
    • navigateByUrl(url, extras) — делаем навигацию к заданному URl-адрему.
    • navigate(commands, extras) — делаем навигацию по массиву сегментов.

    Система маршрутизации уничтожает компонент после того, как он перестает отображаться.

    Навигация с queryParams и хэшем

    События навигации

    Некоторые компоненты должны знать о выполнении навигации, неважно задействованы они в навигации или нет. Свойство events объекта router возвращает объект типа Observable , который может использоваться для отслеживания навигационных изменений.

    Типы Event для Router.events

    • NavigationStart — триггер на начало навигации
    • RoutesRecognized — триггер на ‘узнавание’ системной марщрута
    • NavigationEnd — триггер на конец навигации
    • NavigationCancel — триггер на отмену навигации
    • NavigationError — триггер на ошибку навигации

    Универсальные маршруты

    ** — так обозначается путь, который может соответствовать любому URl.

    Перенаправление маршрутов

    Дочерние маршруты

    Дочерние маршруты позволяют компонентом реагировать на изменении URl-адреса, путем вставки в шаблон компонентов элемента router-outlet .

    Дочерние маршруты определяются в свойстве children . Компоненты выбранные как дочерние маршруты отображаются в router-outlet , который определен в родительском компоненте.

    # 23 Ng route. Пишем мини блог с помощью $routeParams в AngularJS


    Всем привет. Сегодня мы с вами продолжим разбираться с ngRoute, а именно, мы будем использовать routeParams. Что это такое? Когда мы, например, хотим обратиться к какому-то конкретному посту, то у нас будет использована динамическая id. Давайте попробуем.

    Если мы посмотрим в браузер и напишем #/posts/232 мы увидим, что при введении любой id у нас выводится шаблон «This is my cool post». Это очень удобно, когда у вас выводится какое-то содержимое в зависимости от введенной в url id. Именно вот это :postId обозначают, какой параметр в url будет менятся.

    Теперь давайте добавим .otherwise.

    Что такое otherwise? Это правило, которое будет срабатывать, когда ни одно из правил выше не подходит. Например, мы ввели что-то, что не ожидалось вообще. Если мы введем не существующий url, то увидим надпись 404.

    Теперь давайте заменим все шаблоны на templateUrl.

    Создадим файлы posts.html и post.html.

    Как мы видим, templateUrl работают правильно и выводят правильные шаблоны.

    Теперь давайте добавим контроллер postCtrl.

    Как мы видим в браузере, routeParams — это обьект, в котором у нас есть проперти postId с значением 333. Это потому, что ngRoute предоставляет нам возможность в любом контроллере шаблона получить доступ к динамическим переменным, таким как postId. Теперь мы можем выводить в контроллере все, что относится к этому посту.

    Давайте добавим postsCtrl

    В браузере мы видим, что когда мы заходим на /posts, то срабатывает postsCtrl. Теперь давайте создадим фабрику, в которой будут хранится наши посты.

    Вот у нас есть 3 поста и теперь мы инджектим postsFactory.

    Создаем новую переменную $scope.posts и выводим их в шаблоне.

    В браузере мы видим, что у нас вывелись все три поста. При клике на пост мы переходим на конкретный пост.

    Теперь мы хотим, чтобы при клике на определенный пост у нас выводилось правильное содержимое.

    Мы заинджектили postsFactory в контроллер и находим в массиве постов нужный пост. Когда мы находим наш postId, он string, так как он берется из нашего url. Number приводит его в число, чтобы мы могли найти его правильно в массиве.

    Для поиска елементов в массиве я добавил библиотеку lodash. Мы хотим получит правильный обьект в массиве. Для этого мы используем метод lodash findWhere, который принимает массив для поиска и обьект с ключем, по которому мы будем искать.

    В браузере мы видим, что у нас выводится название нашего поста при переходе на пост. Вот мы и создали с вами минимальный блог с постами.

    Angular 2 Route Params в дочерних маршрутах

    у меня есть маршрут:/app/project/23 / views

    каждая часть пути является дочерним элементом предыдущей части, и все дети ленивы загружены (не уверен, что ленивый загруженный бит здесь уместен)

    Топ-пост этого месяца:  Урок 2. Права и роли пользователей

    Я пытаюсь получить доступ к параметру маршрута » projectId «(в этом случае: 23)

    дает мне пустой объект для этого.маршрут.params

    дает мне что я ищу:

    поскольку это дочерний маршрут, я должен указать это.маршрут.родитель.родитель!—24 чтобы получить параметры маршрута (некоторые) родительского маршрута?

    есть ли лучший способ получить params от полное маршрут, потому что что произойдет, если:

    1) я изменяю глубину дочернего маршрута и перемещаю его еще на один шаг вниз. Должен ли я изменить свой код сейчас, чтобы сказать этот.маршрут.родитель.родитель.родитель!—24.params

    2) или, скажем, это 10-е (поколение? суб-ребенок? пра-пра-пра-правнук?). Должен ли я тогда сказать: это.маршрут.родитель.родитель.родитель.родитель.родитель.родитель.родитель.родитель.родитель!—24.params

    — Edit: добавлены файлы конфигурации маршрутизации — — —

    app.маршрутизирующий.ТС

    частная.маршрутизирующий.ТС

    Location Strategy- Routing in Angular2

    Angular 2’s router is super easy to use. Angular 2 gives you the possibility of div >route the user to different components based on the url that they type on the browser, or that you direct them to through a link. This post will cover standard routing, route parameters and nested child routes in Angular2. With these basics we can build a great navigation experience for users.

    Configuration and Declaring Routes

    A routed Angular application has one singleton instance of the Router service. When the browser’s URL changes, that router looks for a corresponding Route from which it can determine the component to display.

    A router has no routes until you configure it. The following example creates four route definitions, configures the router via the RouterModule.forRoot method, and adds the result to the AppModule ‘s imports array.

    The first thing that we need to do when setting up routes for any project is to define the routing table. We will start out with a basic home route that maps to the HomeComponent and then add another route to redirect the root path to our home route.

    Our route config defines all the routes in our application. The first route is our default home route. The second one is our serviceComponent . The path value is the path that we referenced in our template. We export our routes to be added to our App Module.

    Маршрутизация Angular Подробное руководство

    Порядок настройки роутинга

    Свойства Routes

    • path — путь для маршрута
    • component — компонент для URL
    • pathMatch — задает соответствие URL свойству PATH (‘ full ‘, ‘ prefix ‘); свойство обязательно при наличии redirectTo
    • redirectTo — редирект на другой URL
    • children — для задания дочерних маршрутов, которые отображают дополнительные компоненты во вложенных элементах router-outlet , содержащихся в шаблоне компонента активации
    • outlet — для поддержки множественных компонентов outlet
    • resolve — определяет действия, которые должны быть совершены перед активацией маршрута
    • canActive — управляем активацией маршрута
    • canActiveChild — управляем активацией дочернего маршрута
    • canDeactivate — управляем тем, когда маршрут может деактивироваться для активации нового маршрута
    • loadCildren — для настройки модуля, который загружается только в случае необходимости
    • canLoad — загрузка модулей по требованию

    Директивы RouterOutlet

    Именно корневой компонент обеспечивает навигацию между разными компонентами. RouterOutlet — директива ( ) станет заполнителем, где роутер отобразит view (при этом все предыдущие компоненты будут удалены).

    Именованные элементы router-outlet

    router-outlet может быть несколько. Отсюда следует, что по одному маршруту можно вывести несколько компонентов, загрузив их в разные router-outlet .

    Чтобы отличать элементы router-outlet используется атрибут name . router-outlet без атрибута name является первичным, что равносильно outlet: «primary» .

    Элемент base

    Элемент base задает URl, с которым будут сравниваться пути маршрутизации.


    Директива routerLink

    Директива routerLink приказывает Angular выбрать в качестве целевого маршрута результат значения(выражения) директивы routerLink .

    Выражения для routerLink задаются в виде массива, значения которого соответствуют каждому конкретному сегменту.

    Директива routerLinkActive

    Для стилизации активных ссылок применяется специальная директива routerLinkActive . Активная ссылка с директивой [routerLink] получает класс router-link-active .

    routerLinkActive по умолчанию выполняет частичный поиск совпадения для активных URl. Однако это можно регулировать: если exact равно true , то происходит полное сопоставление URl.

    Служба ActivatedRoute и параметры маршрута

    ActivatedRoute — содержит информацию о маршруте связанную с компонентом, который загружен в outlet .

    Свойство ActivatedRoute

    snapshot — возвращает объект ActivatedRouteSnapshot , который описывает текущий маршрут.

    Свойства ActivatedRouteSnapshot

    • url — возвращает массив объектов URLSegment , каждый из которых описывает один сегмент URl-адреса для текущего маршрута
    • params — возвращает объект Params с описанием параметров URl
    • queryParams — возвращает объект Params с описанием параметров запроса URl
    • fragment — возвращает объект string, содержащий фрагмент URl

    Свойства URLSegment

    • Path — строка со значением сегмента
    • parameters — индексированная коллекция параметров

    Маршрут вида ‘ item/:id ‘ будет соответствовать любому URl-адресу из двух сегментов, первый из которых будет содержать item . Второй сегмент будет содержать значение, которое присвоится параметру с именем id . Mы сможем обратиться к компоненту с запросом типа /item/7 , и число 7 будет представлять параметр id .

    Реагируем на текущие изменения навигации при помощи ActivatedRoute

    Свойства класса ActivatedRoute относящиеся к Observable:

    • url — возвращает Observable : набор сегментов URl при изменении маршрута
    • params — возвращает Observable

    : набор параметров при изменении маршрута
    queryParams — возвращает Observable

    : набор параметров запроса при изменении маршрута

  • fragment — возвращает Observable : фрагмент URl при изменении маршрута
  • Множественные параметры и routerLink

    Mы сможем обратиться к компоненту с запросом типа /item/edit/7 :

    Выражения для routerLink задается в виде массива, значения которого соответствуют каждому конкретному сегменту.

    Дополнительные(необязательные) параметры маршрута

    В браузере: http://localhost:3000/products/1/edit;name=John;city=Moscow

    Получить в компоненте можно точно также как и для основных параметров (см. пример выше).

    Класс Router

    Класс Router предоставляет доступ к системе навигации из компонентов.

    Свойства и методы Класса Router

    • navigated — возвращает true , если было хотя бы одно событие навигации, иначе false .
    • url — возвращает активный URl-адрес
    • isActive(url, exact) возвращает true , если заданный URl совпадает с URl, определенным активным маршрутом.
    • events — возвращает объект типа Observable , который может использоваться для отслеживания навигационных изменений.
    • navigateByUrl(url, extras) — делаем навигацию к заданному URl-адрему.
    • navigate(commands, extras) — делаем навигацию по массиву сегментов.

    Система маршрутизации уничтожает компонент после того, как он перестает отображаться.

    Навигация с queryParams и хэшем

    События навигации

    Некоторые компоненты должны знать о выполнении навигации, неважно задействованы они в навигации или нет. Свойство events объекта router возвращает объект типа Observable , который может использоваться для отслеживания навигационных изменений.

    Топ-пост этого месяца:  Как применяются медиа запросы CSS для создания адаптивных макетов примеры работы с сеткой

    Типы Event для Router.events

    • NavigationStart — триггер на начало навигации
    • RoutesRecognized — триггер на ‘узнавание’ системной марщрута
    • NavigationEnd — триггер на конец навигации
    • NavigationCancel — триггер на отмену навигации
    • NavigationError — триггер на ошибку навигации

    Универсальные маршруты

    ** — так обозначается путь, который может соответствовать любому URl.

    Перенаправление маршрутов

    Перенаправление маршрутов определяется при помощи свойства redirectTo , которое задает URl на который произойдет перенаправление. При перенаправлении должно быть задано свойства pathMatch (со значениями: full (URl полностью совпадает со значением совйства path), prefix (URl начинается с заданного пути))

    Дочерние маршруты

    Дочерние маршруты позволяют компонентом реагировать на изменении URl-адреса, путем вставки в шаблон компонентов элемента router-outlet .

    Дочерние маршруты определяются в свойстве children . Компоненты выбранные как дочерние маршруты отображаются в router-outlet , который определен в родительском компоненте.

    Свойства ActivatedRoute для обращения к частям маршрута

    • PathFromRoot — массив объектов ActivatedRoute , содержащий маршруты, использованные для сопоставления с текущим URl
    • paren t — объект ActivatedRoute для родителя маршрута
    • firstChild — объект ActivatedRoute (первый дочерний), использованный для сопоставления с текущим URl
    • children — массив объектов ActivatedRoute (все дочерние маршруты), использованные для сопоставления с текущим URl

    Это очень удобно, так как дочерний компонент, к примеру, не получает уведомления, если изменились параметры у родительского компонента.

    Guards

    Guard — механизм для выполнения проверок перед активацией и деактивацией маршрута.

    Свойства для использования guards:

    • resolve — назначает guadrs, которые откладывают активацию маршрута до завершения какого-либо действия, например, нам нужно загрузить данные с бэк-да.
    • canActivate — назначает guadrs, которые определяют возможность активации маршрута.
    • canActivateChild — назначает guadrs, которые определяют возможность активации дочерних маршрутов текущего маршрута
    • canDeactivate — назначает guadrs, которые определяют возможность уйти с текущего маршрута.
    • canLoad — определяет может ли модуль загрузиться с использованием lazy loading.

    resolve

    resolve — назначает guadrs, которые откладывают активацию маршрута до завершения какого-либо действия, например, нам нужно загрузить данные с бэк-да.

    resolve — это классы, определяющие метод resolve с двумя аргументами:

    • route: ActivatedRouteSnapshot — текущее состояние активного route
    • state: RouterStateSnapshot — текущее состояние всего route

    Допустимые значения, которые возвращает метод resolve , при которых произойдет активация нагого маршрута:

    Определяем Resolvers как отдельный сервис:

    Добавляем вышеописанный сервис в роутинг:

    Модифицируем компонент для работы с resolver:

    Также удобно в resolver обрабатывать ошибки и, например, перенаправлять пользователя на нужную страницу.

    canActivate

    Интерфейс CanActivate расширяет класс для решения задачи по активации маршрута, тем самым мы определяем guard по активации маршрутов. Метод canActivate — возвращает логическое значение, указывающее на необходимость активации компонента. Удобно для проверки паролем и т.д.

    Допустимые значения, которые возвращает метод CanActivate :

    • boolean — обычно при синхронной операции; true — добро, false — отказ.
    • Observable — асинхронная операция; Angular ожидает, когда Observable выдаст значение.
    • Promise — асинхронная операция; Angular ожидает, как разрешится Promise.

    И не забудьте добавить AuthGuardLogin в providers :

    canActivateChild

    Метод canActivateChild — определяет возможность активации дочерних маршрутов текущего маршрута. guard применяется к родительскому маршруту, при этом Метод canActivateChild вызывается всякий раз при изменении дочерних маршрутов. CanActivateChild на angular.io

    canDeactivate

    Деактивация маршрута происходит при уходе пользователя с маршрута. Полезно, например, если у пользователя остались несохраненные данные. CanDeactivate на angular.io

    Класс canDeactivate получает три аргумента:

    • component: T — деактивизируемый компонент
    • currentRoute: ActivatedRouteSnapshot
    • currentState: RouterStateSnapshot

    Декомпозиция модулей (разбиение на модули) нужна в том числе для Lazy Loading (ленивая загрузка) — данную особенность предоставляют модули. Обычно приложение загружает весь js со всеми модулями, но зачем нам загружать все страницы, к примеру, если тот же юзер на второстепенные страницы может не перейти? Незачем. Поэтому мы можем вынести второстепенные страницы в отдельные модули и загружать их по необходимости.

    Вот и рассмотрим на примере роутинга, то есть подключение модуелей с Lazy Loading по мере необходимости. Как видите, мы подключаем модуль указав путь, а не через import , так как import загрузит модуль сразу, а нам это не надо, также удалите import < PhrasesModule >в app.module.ts. Мы не будем использовать import , чтобы не webpack сразу не подключил наш файл в приложение.

    loadChildren — значением данного свойства является строка, чтобы webpack ничего заранее не загрузил.

    Теперь при переходе на страницу phrases в консоли вы сможете увидеть подгружаемый chank.

    Отметьте, что для Guard вместо canActivate: [CanLoadChildModuleGuard] нужно писать canLoad: [CanLoadChildModuleGuard]

    Предзагрузка для lazy модулей

    Для lazy модулей мы можем настроить предзагрузку. Существует параметр preloadingStrategy со значениями:

    PreloadAllModule — когда приложение загружено, подтягиваются все lazy модули. Также мы можем создать свою стратегию (класс MyPreload ) — в нем мы дожны реализовать один метод preload . Реализуем загрузку модуля по небольшой задержке:

    Анимация при роутинге

    router-outlet заворачиваем в тег, на котором вешаем анимацию:

    Angular 2 Routing — получить параметр маршрутизации — машинопись

    nvm 0.31.0: npm 3.10.3: Node.js 6.6.0

    Если я тогда наберу это в браузере: http: // localhost: 3000 / profile / 1 Консоль:

    Так чего мне здесь не хватает 🙂

    1 ответ

    Метод subscribe() отслеживает изменения в URL-адресе, но в компоненте входа в систему вы переходите непосредственно с маршрутизатором.

    В документации к маршрутизатору в следующем фрагменте кода показано, как выполнить синтаксический анализ параметров, если это сделать таким образом.

    Тем не менее, прямой ввод URL-адреса вызовет метод subscribe() так как он непосредственно наблюдает за URL-адресом, и объясняет, почему такой способ работает, и вы видите его в журнале консоли.

    Angular2 ожидания маршрутизации для получения из URL Params

    1. Получение параметров из URL
    2. Затем отправить запрос HTTP к API с этим парами

    Если бы я сделал это undirectly с помощью браузера URL — адрес поля , он прекрасно работает , но когда я использую router.navigate([/users, userName]); его работу , чтобы замедлить.

    Это код внутри UserComponent.

    И this._userService это иногда делается , прежде чем this.sub есть.

    Как это исправить?

    Вы можете использовать switchMap для того , чтобы перейти от params наблюдаемого к наблюдаемым обеспечивается getUser() .

    Тогда вы можете проецировать это наблюдаемый в другой, что полезно для вашего случая, например:

    И, наконец, вы можете использовать наблюдаемый в шаблоне:

    Добавить комментарий