在Angular2中将Resolve应用于根组件

Question

在Angular2中我们可以使用Resolve如下：

import { UserResolver } from './resolvers/user.resolver.ts';

export const routes: RouterConfig = [
  {
    path: 'users/:id',
    component: UserComponent,
    resolve: {
      transaction: UserResolver
    }
  }
];

但是我怎样才能最好地应用解析器来运行，例如，我的app.component.ts？也许当网站第一次加载时，无论首先加载哪个页面，我总是需要先获取用户数据（例如）。那么我怎样才能让这个解析器应用到路由层次结构的下层呢？

Answer 1

我一直在想同样的事情。

事实证明，如果对站点的初始请求是针对其组件之一由解析保护的路径，解析将在树中的任何组件被实例化之前运行。包括AppComponent。

现在的问题是AppComponent 本身不是路由组件，因此它无法访问已解析的数据。也许您可以将ActivatedRoute 注入AppComponent 并通过当前路由的children 访问数据，但这似乎很hackish。

我通常做的是在我的路由层次结构的根部设置一个解析（或CanActivate 守卫）来获取初始数据。数据本身由服务返回并包装在ReplaySubject 中。这保证了 1) 数据将在所有订阅者之间共享； 2) 获取数据的代码只会执行一次。

换句话说：

• 我使用 observable 来一次获取异步数据，然后在我的应用程序的所有需要​​它的部分之间共享它。
• 我依靠路由系统在应用生命周期中尽早触发该 observable 的执行。

（但我没有使用路由系统来获取数据并共享它。）

更新以回答 cmets：

你必须引入一个虚拟父路由来支持守卫，例如：

const routes: Routes = [
  {
    path: '',  // This is the "root route"
    component: PageShellComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'home', component: PageHomeComponent },
      { path: 'inbox', component: PageInboxComponent },
      { path: 'settings', component: PageSettingsComponent }
    ]
  },
];

父路由是“我的路由层次结构的根”，它的保护AuthGuard 为应用程序中的所有子路由执行。可以看到，父路由的路径为空，PageShellComponent 的模板只包含<router-outlet></router-outlet>。这条路线的唯一目的是支持守卫。

我应该补充一下，感觉不是很地道，我不确定这是最好的方法。