angular 每个视图 2 个解析器

Question

所以我的应用程序基于 angular 2(angular cli) 和一些 CMS。页面的一些片段是从 CMS 下载并显示在 angular 2 页面上。主要问题是页眉和页脚来自 CMS。所以我想知道如何添加全局解析器（全局非常重要，我不想为应用程序中的每个路由路径添加解析器），这将强制 angular 等待 CMS return 页眉和页脚。我已经通过实现路由接口成功地使用解析器等待某些路由上的一些数据

export class InboxResolver implements Resolve<MessageListItem[]>

我在一些自定义路线中使用它：

const MessagesRoutes: Routes = [
 {
    path: 'inbox',
    component: InboxComponent,
    resolve: { messages: InboxResolver }
 }
];

但是如何在一个地方定义一个全局的HeaderAndFooterResolver呢？

Answer 1

不确定您的问题是什么，但您可以使用带有解析器的无组件父路由，并将其与其所有子路由共享

const MessagesRoutes: Routes = [
    { path: '', resolve: { messages: InboxResolver }, children: [
        { path: 'inbox', component: InboxComponent},
        { path: 'xxx', component: XxxComponent},
        { path: 'zzz', component: XxxComponent},
    ]}
];

Answer 2

你基本上每个 component 需要一个 resolver 并且需要为每个路由声明一次，除非它们是父>子，你可以像下面这样在它们之间共享解析器：

const MessagesRoutes: Routes = [
  { path: '', resolve: { messages: EmailResolver }, children: [
    { path: 'inbox', component: InboxComponent },
    { path: 'outbox', component: OutboxComponent },
    { path: 'sent', component: SentComponent },
    { path: 'received', component: ReceivedComponent }
  ]}
];

Answer 3

如果你只想将解析器添加到每个顶级路由，那么像下面这样的东西就可以了。

   const addGlobalResolver = <T extends Type<Resolve<any>>>(routePaths: Routes, resolver: T, name: string): Routes => {
      return routePaths.map(route => {
        if (route.resolve != null || route.resolve === undefined) {
          route.resolve = {};
        }
        route.resolve[name] = resolver;
        return route;
      });
    };

只需在将路由传递给路由模块之前调用它。

[RouterModule.forRoot(addGlobalResolver(routes, InjuryResolver, 'Injury'))]

angular 每个视图 2 个解析器

angular 2 resolver for every view

resolver

content-management-system

angular-cli

angular