时间戳

首页 > 解决方案 > Angular 将 SSR 与加载路线相结合

angular - Angular 将 SSR 与加载路线相结合

问题描述

我通过这个问题的答案Angular 5 Build routes from API data at startup作为从后端加载路由的指南，然后我注意到我无法导航到那些我从 API 加载到 routerConfig 的路由。

我找到了原因，结果发现我的应用程序正在使用服务器站点渲染，所以我initialNavigation设置为“启用”，这就是我的路由没有被注册的原因。Docs 说：“这个值是服务器端渲染工作所必需的。”

我需要从 API 加载路由的解决方案，同时保持 SSR，因为应用程序需要对 SEO 友好，是否有一个好的解决方案来做到这一点？因为我在谷歌上搜索了一段时间，在这种情况下找不到任何有用的东西。

标签： angularroutesangular-routingserver-side-rendering

解决方案

这是一个加载外部路由的示例服务。

@Injectable({
  providedIn: 'root'
})
export class RouteConfigService {

  constructor(
    private categoryService: CategoryService,
    private router: Router
  ) {
  }

  public loadRoutes(): Promise<any> {
    var promise = this.categoryService.list().then(t => {

      const config = this.router.config;
      config.push({ path: '', component: HomeComponent, pathMatch: 'full' });

      t.forEach(category => {
          config.push({ path: category.url, component: CategoryComponent });
      });

      this.router.resetConfig(config);

    });
    return Promise.resolve(promise);
  }
}

然后你的 app-routing.module.ts 应该是这样的：

@NgModule({
  imports: [RouterModule.forRoot([])],
  exports: [RouterModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (routeConfigService: RouteConfigService) => 
        () => routeConfigService.loadRoutes(),
      deps: [RouteConfigService],
      multi: true
    }
  ],
})
export class AppRoutingModule { }

推荐阅读