在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数据AppComponentchildren但这看起来很黑客。

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

换句话说：

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

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

更新回复评论：

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

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

我应该补充一点，它感觉不太惯用，而且我不确定这是最好的方法。