薄组件层
您的 Angular 组件仅渲染 iframe，设置尺寸，并连接可选的事件输出。
Angular 游戏组件
用于浏览器游戏的 Angular 游戏组件
Angular 应用无需将游戏引擎导入包即可运行可玩的浏览器游戏。在组件中渲染一个游戏框架，安全地绑定框架 URL，并在宿主应用需要游戏信号时订阅 postMessage 事件。
组件模板
消息监听器
响应式 iframe
已签署完成支持
简答
使用框架路由，然后添加页面上下文。
在 Angular 中，创建一个组件，其中 iframe 指向 /embed/{gameSlug}/frame/，在查询字符串中传递 tenantId，并监听 data.source 为 gamesiknow 的窗口消息事件。
试试这款兼容 Angular 的游戏组件
该演示展示了您的 Angular 服务或组件可以处理的 iframe 和父页面事件。
Angular 开发人员正在添加游戏 embed
为什么 Angular 团队使用 iframe 小部件
iframe 将游戏运行时置于 Angular 包之外，同时仍然允许在服务或组件中进行类型化事件处理。
应用内没有游戏逻辑
董事会规则、资产和实时行为都保留在 Games I Know 帧路由中。
框架安全边界
使用 @HostListener 或专用消息服务，无需与游戏内部耦合。
设置流程
如何在Angular中使用embed来创建一个游戏组件
创建一个独立组件或功能组件，绑定一个稳定的框架 URL，并在组件销毁时清理监听器。
步骤 1
创建一个 GameWidgetComponent
添加一个宽度为 100%、高度稳定在 640px 左右、允许“全屏”的 iframe，以及 Games I Know 框架 URL。
步骤 2
构建框架 URL
使用来自环境或运行时配置的 tenantId 和可选的 campaignId 来组合 /embed/{gameSlug}/frame/。
步骤 3
使用 @HostListener 或服务收听
处理窗口消息事件，并筛选 data.source === "gamesiknow" 以获取 GAME_STARTED 和完成信息。
步骤 4
奖励前请核实。
如果 Angular 应用解锁了内容，请将签名令牌转发到您的后端，并在授予奖励之前使用合作伙伴服务器密钥进行验证。
执行
Angular 实现说明
在变更检测周期中保持 iframe 源稳定，并在销毁时取消订阅消息处理程序。
避免重新挂载 iframe
不要在每次变更检测时都重新创建 iframe。除非租户或游戏发生变更，否则只需绑定一次 src。
使用 ngOnDestroy 清理
组件销毁时移除消息监听器，以防止开发模式下出现重复的处理程序。
将用户界面与验证功能分离
Angular 可以快速显示获胜者界面，但积分和奖品应该在服务器端决定。
可玩游戏
选择适合页面的游戏
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed 设置
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed 设置
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed 设置
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed 设置
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed 设置
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed 设置
常问问题
关于Angular 游戏组件的常见问题
/embed/{gameSlug}/ 和 /embed/{gameSlug}/frame/ 有什么区别？
使用 /embed/{gameSlug}/frame/ 作为 iframe 的 src。该路由是为网站 embed 和 postMessage 事件构建的轻量级游戏框架。/embed/{gameSlug}/ 路由是面向用户的公开预览和 SEO 页面，不应放置在 iframe 内。
访客需要下载应用程序或创建帐户吗？
不。访客可以在手机、平板电脑、笔记本电脑或台式机上的浏览器iframe内进行游戏。只有安装embed的网站所有者才需要合作伙伴帐户。
我可以将 embed 限制在我自己域内吗？
是的。Games I Know 和 embed 是围绕注册网站和域名受限的租户设置设计的，因此复制的 iframe 代码不能在未经授权的网站上随意重复使用。
哪些Games I Know标题目前是embed可执行的？
Tic Tac Toe、Four in a Row、Bingo 和 I Know 可作为 embed 浏览器游戏使用。embed 文档在所有受支持的游戏中使用相同的事件模型。
Games I Know 是 Angular 库还是 npm 包？
编号 Games I Know 和 embed 是基于 iframe 的，这使得在 Angular、React、Next.js、Astro 和其他堆栈中的集成保持轻量级。