#angular #api #angular-resolver
#angular #API #angular-resolver
Вопрос:
Я использую Angular Resolver для предварительной выборки данных с сервера перед отображением маршрута, чтобы страница не загружалась пустой, мы согласны с этим принципом.
Теперь мой вопрос заключается в том, как использовать то же самое Resolver для предварительной выборки данных с сервера без маршрута? Чтобы подробнее объяснить мой вопрос, вот эскиз моего экрана :
В HeadreComponent моего приложения мне нужно выполнить некоторый api-вызов для получения person.firstName и person.lastName , но в заголовке нет определенных маршрутов, потому что он должен отображаться на первой странице (http:localhost:4200home ). Итак, я не могу использовать обычный синтаксис в конфигурации маршрутов для вызова преобразователя следующим образом :
{path: 'home', component: HomeComponent, resolve: {personInfos: PersonInfoResolver}}
Возможно, я что-то упускаю из виду, что я начинаю разработку Angular, поэтому будьте добры, пожалуйста: D
Комментарии:
1. Вы могли бы создать родительский элемент с пустым путем и без компонента и включить компонент вашего приложения в качестве дочернего элемента этого маршрута. Это сделало бы компонент вашего приложения маршрутизируемым вместе с вашим заголовком, что позволило бы использовать распознаватель.
2. @trichetriche не могли бы вы объяснить подробнее, пожалуйста? Вы имеете в виду создание HeaderParentComponent с
{path: '', component: HeaderParentComponent, resolve: {personInfos: PersonInfoResolver}}?3. Да, удалите заголовок из вашего компонента приложения. Сделайте так, чтобы он отображался в вашей конфигурации маршрутизации. Затем вы получаете доступ к преобразователям.
4. В этом случае я думаю, что я должен сделать это для компонентов с поперечным отверстием, например NavigationComponent, FooterComponent и т.д… Я прав? Это будет:
{path: '', component: ParentComponent, resolve: {list all my api resolvers here ...}}и html-часть моего родительского компонента будет выглядеть :<app-header> <router-outlet> <app-footer>5. Зависит от того, что вы ожидаете, но это может быть так, да. На вашем месте я бы сначала просто загрузил страницу без данных, поскольку верхний / нижний колонтитулы — это части приложения, которые никогда не будут перемещаться.
Ответ №1:
Решение, которое я использовал, это то, что @trichetriche предложил в комментарии: использовать родительский компонент, у которого есть route () для реализации преобразователей, а затем использовать @Input() для передачи данных дочернему компоненту.