8

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

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

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

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

4

1 回答 1

3

我一直在想同样的事情。

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

现在的问题是它AppComponent本身不是路由组件，因此它无法访问解析的数据。也许您可以通过当前路由注入和访问数据，ActivatedRoute但这似乎很骇人听闻。AppComponentchildren

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

换句话说：

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

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

更新以回答评论：

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

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>. 这条路线的唯一目的是支持守卫。

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

于 2017-02-24T09:11:17.827 回答