程序员经验分享-hwhale

Angular 通用 - 为客户端缓存的服务器端请求

2024-03-26

我看过很多关于在角度通用应用程序中缓存客户端数据的文章，因此它不会重复客户端上已在服务器上解析的请求。

我只是不明白数据如何从服务器传输到客户端。我是否将 JSON 注入到预渲染的 HTML 中，还是缺少其他内容？


从 Angular 5 开始，Angular Core 内部有一个模块，称为TransferStateModule这会为你做这件事。https://angular.io/api/platform-b​​rowser/TransferState https://angular.io/api/platform-browser/TransferState

您只需将 API 响应与 StateKey（基本上就像一个字符串）一起添加到服务器端的缓存中，在将 index.html 文件发送到客户端之前，它会以 Json 形式写入 DOM，您需要提供 StateKey 并从 Json 中获取结果。

在官方通用入门套件中，您可以查看注册地点和内容：https://github.com/angular/universal-starter https://github.com/angular/universal-starter

更新角度 6

您不需要自己设置状态密钥。新的 TransferStateModule 有一个 HttpClient 拦截器，可以自动设置密钥！如果您想要更多控制权，您仍然可以自己完成，但现在只需添加模块即可轻松完成（最新的通用入门套件默认导入它！）

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angular

caching

angularuniversal

serverrendering

Angular 通用 - 为客户端缓存的服务器端请求 的相关文章

  • Intel 64 和 IA-32 上的 MESI 有何意义

    MESI 的要点是保留共享内存系统的概念 然而 对于存储缓冲区 事情就变得复杂了 一旦数据到达 MESI 实现的缓存 下游内存就会保持一致 然而 在此之前 每个核心可能对内存位置 X 中的内容存在分歧 具体取决于每个核心的本地存储缓冲区中的

  • 在 Angular 中，如何动态地将某些单词包装在另一个 html 元素中？

    我有这个简单的角度组件 Component selector my component template p someString p export class MyComponent Input someString string som

  • GitHub Actions：如何缓存测试容器的 Docker 映像？

    我使用 Testcontainers 在 GitHub Actions 中执行一些测试 Testcontainers 提取我的测试中使用的图像 不幸的是 每次构建时都会再次提取图像 如何在 GitHub Actions 中缓存图像 GitH

  • 如何将 Angular 材质拖放与虚拟滚动集成？

    我正在尝试将 Angular 材质的虚拟滚动与拖放集成在一起 但由于某种原因 当我尝试实现此功能时 它会恢复项目 而当我尝试拖放元素时 它不起作用 这是代码摘要

  • Angular 6. 是否可以按条件注入服务？

    在我的角度应用程序 带有角度材料 中 我有一个过滤器面板 除了选择之外 我还希望能够自动完成 用户输入值并将其发送到后端 通过 regexp 查询我们在 MongoDB 集合中找到匹配项 但要做到这一点 我需要手动将服务注入过滤器组件 我没

  • 无法让 Azure 缓存正常工作。 “暂时出现故障，请稍后重试。”

    那么 今天我 安装了azure SDK 2 1 并且 使用单个 WorkerRole 创建了一个新项目 使用 NuGet 获取缓存包 将角色的缓存设置为 并置 在 app config 中将主机设置为 WorkerRole1 评论安全部分

  • 如何在 Angular 4 中获取 HTTP 请求标头？

    在互联网上 我只看到向 HTTP 请求添加参数 如下所示 this headers append Content Type application json this headers append Accept application js

  • 在 Angular 4 中处理来自 Api 的过期令牌

    我需要帮助来处理我的角度应用程序中的过期令牌 我的 api 已过期 但我的问题是当我忘记注销我的角度应用程序时 一段时间后 我仍然可以访问主页但没有数据 我能做点什么吗 有没有可以处理这个问题的库 或者有什么我可以安装的吗 更好 如果我什么

  • 如何使用 Angular4 进行 Codeigniter 视图？

    首先 我的 PHP Codeigniter 项目当前在服务器上运行 然后我在服务器上安装了最新的 Angular4 CLI Typescript 但我不知道如何与Codeigniter项目集成 如何像 AngularJS 一样在 Codei

  • 将 TypeMoq 模拟与 Angular TestBed 结合使用

    我定义了一个FooService如下 import Injectable from angular core export interface Foo Foo string Injectable export class FooServic

  • Angular 2 测试 ng-content

    我想知道是否有办法测试ng content不创建宿主元素 例如 如果我有警报组件 Component selector app alert template div div

  • 将 Angular 项目从 StackBlitz 导出到本地

    我想导出在 StackBlitz 中完成的 Angular 项目 并使用以下命令从 Angular CLI 执行它ng serve就像我们对在本地计算机中创建的 Angular 项目所做的那样 去做就对了 这是您需要点击的地方

  • Material 2.0.0-beta.3 md-slider不拖动

    希望这是一个愚蠢的问题 我刚刚在为雇主构建的项目中添加了一个 md slider 因此我没有代码来表示抱歉 我将 MdSliderModule 导入到我正在使用的模块中 在我的模板中我想要的位置添加了标签 它出现了 看起来很棒 但不会拖沓

  • 使用 NSCache 实现缓存过期

    我正在使用 NSCache 在我的应用程序中实现缓存 我想为其添加过期时间 以便在一段时间后它将获取新数据 有哪些选择以及最好的方法是什么 我应该查看访问缓存时的时间戳并使之无效吗 缓存是否应该通过使用固定间隔计时器自动使自身失效 缓存是否

  • Angular 4在下一行显示p标签的换行符

    我有一个 Angular 4 页面 我必须在其中显示用户评论列表 用户可以多行输入评论 我想在多行中绑定文本 我想显示以 n在新行中 我努力了 p p p comment text p 我不想更换 n with br 标签 我想要别的东西

  • Angular 7通过调用两次服务订阅方法进行通信

    我正在使用角度 尝试与非父子组件进行通信 所以我通过服务来传达它 服务 ts Istoggle false Output change EventEmitter lt boolean gt new EventEmitter toggle t

  • gyp ERR，Npm 无法获取本地颁发者证书

    我正在致力于 Windows 10 的全新安装 唯一的事情是我安装了 cygwin 以在 cmd 中获取 unix 命令 当我打字时npm install g angular cli它下载了必要的文件 但我收到错误 gyp ERR conf

  • 浮动标签和占位符重叠

    div class form group form default form spacing div

  • 数字和文本列的垫排序问题

    我有角度材料数据源 角度材料版本是 5 0 3 排序正在进行中 但是对于某些列 它的排序不正确 那里有数字和文字 例如 排序结果如 XXX 1 1tesxt 1 OPD OXD 12

  • Angular 2 - 加载时共享服务

    我正在尝试将服务共享给组件 为此 我创建了 service ts 其中代码如下 import Subject from rxjs Subject export class CommonService CommonList new Subje

随机推荐

  • C语言中的宏（#define）

    我正在阅读hoard内存分配器的源代码 在gnuwrapper cpp文件中 有以下代码 define CUSTOM MALLOC x CUSTOM PREFIX malloc x 是什么意思CUSTOM PREFIX malloc x i

  • MPAndroidChart 条形图 - 如何对组之间具有随机 x 轴间隔的条形进行分组？

    我想制作一个条形图 其中每个数据点将 3 个不同的数据集分组在一起 如下所示 但是 我无法使用库提供的功能将条形图分组在一起groupBars方法 因为无论我为条目设置什么 x 值 它都会根据我在其参数中指定的间隔对条形进行分组 例如 如果

  • 镜头：新型变焦

    我有兴趣获得zooming我的 monad 变压器堆栈的功能定义如下 newtype Awesome a Awesome StateT AwesomeState ExceptT B ByteString IO a deriving Func

  • Python 将列表转换为集合，大 O

    感谢您的帮助 words Big list of words words set set words 当 n len words 时 我很难确定 set words 的复杂性是多少 是 O n 因为它在列表的所有项目上移动 还是 O l n

  • 如何让odeint成功？

    我是 python 初学者 目前使用 scipy 的odeint计算耦合的 ODE 系统 但是 当我运行时 python shell 总是告诉我 gt gt gt Excess work done on this call perhaps

  • 在 PHP 中将十六进制转换为图像？

    我正在开发通过以下方式与服务器通信的移动应用程序PHP Webservice 这是我第一次使用 PHP 我设法将数据上传到数据库 现在我需要发送图像以将其存储在 ftp 服务器中 为此我转换了image gt hex并从我的应用程序发送 服

  • 如何在安装时强制 Chrome 扩展上的键盘快捷键

    我正在尝试实现一个使用键盘快捷键触发事件的 Chrome 扩展 快捷方式在这里声明 commands sample suggested key default Ctrl I windows Ctrl I description Refres

  • emacs autoloaded 中保证自动加载功能的机制是什么

    我知道所有标有 Autoload 行的函数都将是自动加载函数 但问题是执行此 自动加载函数 的底层机制是什么 还有为什么当从 elpa 安装软件包时 会出现一个名为 XXX autoload elc 的编译文件 当您安装 Elpa 软件包时

  • Php变量存储字符串时的大小限制是多少？

    情况是这样的 我有一个 2Gb 的转储文件 名为myDB sql 它是一个转储文件 可删除现有数据库并创建一个带有视图和触发器的新数据库 所以我有字符串myDB OLD分布在许多行代码中 我想将这些字符串的出现次数更改为myDB NEW 我

  • Google reCAPTCHA、405 错误和 CORS 问题

    我正在使用 AngularJS 并尝试使用 Google 的 reCAPTCHA 我正在使用 显式呈现 reCAPTCHA 小部件 在我的网页上显示 reCAPTCHA 的方法 HTML 代码

  • 如何使用 ListView 呈现具有多个行跨列的数据表

    我需要在 html 表中显示数据库中的数据 我目前正在使用 ListView 控件 我希望最终的 HTML 表呈现如下所示的内容 其中某些行有一个rowspan属性大于一 原因是有些字段有几行信息 但对应同一个逻辑条目 例如 data da

  • 实现 Win32 消息循环并使用 P/Invoke 创建 Window 对象

    我的主要目标是纯粹使用以下方法实现正确的消息循环P Invoke http en wikipedia org wiki Platform Invocation Services能够处理 USB HID 事件的调用 当然 它的功能应该与以下代

  • vis.js - 如何运行 getSeed() 方法

    我正在使用 vis js 创建一些数据地图 在文档中它说 理想情况下 你尝试使用未定义的种子 重新加载 直到你满意为止 与布局并使用getSeed 确定种子的方法 然而 对于我的一生 我无法弄清楚如何 使用getSeed 方法 我认为它是一

  • 了解 Deferred.pipe()

    我一直在阅读有关 jQuery 中的 deferreds 和 Promise 的内容 但我还没有使用过它 除了方法管道之外 我已经很好地理解了一切 我实在没明白那是什么 有人可以帮助我了解它的作用以及它可以在哪里使用吗 我知道有一个问题的标

  • Angular2 - 多个组件中的“监视”提供程序属性

    我来自 NG1 环境 目前我正在创建具有所有可用功能的 NG2 应用程序 在提出这个问题之前 我正在探索 google 和 stackoverflow 的问题 但没有运气 因为 Angular 2 的 api 架构发展得如此之快 而且大多数

  • ASP.NET Web 部署失败；项目中不存在 AddScheduledJob

    我有一个包含两个 WebJobs 的 ASP NET 项目 其中一个 WebJobs 可以正常发布 但第二个 WebJobs 无法发布 并且收到以下错误消息 项目中不存在目标 AddScheduledJob 两个 WebJobs 都设置为

  • R - 根据多个条件匹配来自 2 个数据帧的值（当查找 ID 的顺序是随机时）

    嗨我有两个数据框 df1 data frame PersonId1 c 1 2 3 4 5 6 7 8 9 10 1 PersonId2 c 11 12 13 14 15 16 17 18 19 20 11 Played together

  • 每条路由的 NancyFx 身份验证

    从我在源代码中看到的 RequiresAuthentication 对整个模块进行身份验证检查 有什么办法可以按路线执行此操作吗 我有同样的问题 然而事实证明RequiresAuthentication在模块级别和路由级别都有效 为了演示

  • CollapsingToolBarLayout 无法实例化

    在过去的几个月里 我一直在使用折叠工具栏布局 没有任何问题 然而今天 每当我打开 xml 文件时都会弹出此错误 确切的错误如下 以下类无法实例化 android support design widget CollapsingToolbar

  • Angular 通用 - 为客户端缓存的服务器端请求

    我看过很多关于在角度通用应用程序中缓存客户端数据的文章 因此它不会重复客户端上已在服务器上解析的请求 我只是不明白数据如何从服务器传输到客户端 我是否将 JSON 注入到预渲染的 HTML 中 还是缺少其他内容 从 Angular 5 开始

热门标签