Question

我目前有一个很好的Angular Universal项目，由于SEO的需要，我被要求为该项目实施一个管理面板，使他们能够自行更新文本内容。

我在这里的原因是我需要在保存SSR功能的同时实现它，这意味着如果我将GET请求发送到我的页面之一，我希望它显示所有文本，包括动态文本我让他们编辑。由于上述原因，我无法从客户端部分触发一个简单的API，因为如果没有实际运行该应用程序，它将无法正常工作。我的想法是在应用程序的server.ts上获取所有动态数据，并以某种方式将其注入客户端部分，这样我将保留SSR的所有SEO优势。

问题是-我该如何从server.ts注入所有数据？试图用谷歌解决方案，我唯一能找到的方法就是将提供程序添加到app.engine 示例-

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP),
    { provide: 'dynamicContent1', useFactory: () => "some dynamic data I'll GET from the db prior to this line of code." },
    { provide: 'dynamicContent2', useFactory: () => "some dynamic data I'll GET from the db prior to this line of code2." }    
  ]
}));

然后客户端部分将是-

  title = "";
  constructor(private injector: Injector, @Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformServer(this.platformId)) {
      this.title = this.injector.get('dynamicContent1');
    } else {
      console.log('we\'re rendering from the browser, so there is no request object.');
    }
  }

执行上述操作，我认为我可以使用SSR从客户端访问dynamicContent1。上面的示例不起作用并抛出-

Error: StaticInjectorError[{provide:"dynamicContent1", useFactory:useFactory}]: 'deps' required

找不到此问题的答案...不管哪种方式，我不确定那是否是正确的方法。

会喜欢我应该如何处理的一些建议吗？在站点加载之前如何获取数据，以及如何将其注入客户端以保留SSR功能？

谢谢！

如何为Angular Universal项目创建管理面板？

0 个答案: