第 2 部分 - 使用 Sanity.io 实现动态数据的 Angular Jamstack 站点
工程经理
发布
2021 年 3 月 1 日
标签
角度
Netlify 功能
Sanity.io
分享
X（又名 Twitter）
LinkedIn
Facebook
蓝天
在这篇文章中
如果您刚刚加入我们，这是本系列的第二部分，我们将在 墨西哥电报号码数据库 中构建一个 Angular 网站，该站点使用Netlify 函数和Build Hooks从Sanity.io （无头 CMS）中获取数据。
本系列第 1 部分涵盖：
从预渲染的 Angular 站点模板开始
使用 Sanity.io 设置无头 CMS
使用 Netlify 函数从 CMS 获取数据
在第 2 部分中，我们将：
添加 Angular 服务来处理传入数据
创建并更新 Angular 组件来显示数据
设置构建钩子以在添加新数据时更新页面
该页面的外观如下：
最终项目
想要跳过阅读，直接“运行”？这是项目仓库，或者您可以单击下面的按钮立即部署网站！
部署到 Netlify
创建 Angular 服务
在本系列的第一部分中，我们添加了一个 Netlify 函数来从 Sanity.io 获取所需的数据。现在，我们将使用Angular 服务来访问该数据。
添加产品型号
首先，我们需要的是从 Sanity.io 接收的产品数据的接口。接口是TypeScript 语法契约，定义类型以便检查它们。Product接口非常复杂……一切都是类型strin请放心，您可以在接口中分配其他类型。