介绍
在 Web 开发中，我们经常需要将代码片段或整个文件嵌入到我们的网页中。而 GitHub Gist 是一个非常方便的工具，我们可以将自己的代码上传到 GitHub Gist 并获得代码嵌入链接后，再将这个链接直接使用在自己的 Blog 或网站上。今天，我要向大家介绍如何使用 npm 包 @sgbj/angular-gist 将 GitHub Gist 嵌入到 Angular 应用程序中。
安装
我们可以通过 npm 安装 @sgbj/angular-gist：
npm install @sgbj/angular-gist --save
使用
在需要使用代码片段的组件中导入 GistModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ---------- - ---- --------------------- ----------- -------- - ----------- - -- ------ ----- --------- - -在模板中使用：
<sgbj-gist [gistId]="gistId" (loaded)="gistLoaded($event)" (error)="gistError($event)" ></sgbj-gist>
上面的代码中，我们使用了 @sgbj/angular-gist 提供的 Gist 组件，将其添加到模板中。Gist 组件有以下属性：
gistId: 表示 GitHub Gist 的 ID。loaded: 表示加载成功的事件。error: 表示加载失败的事件。
在控制器中设置 GitHub Gist ID：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- --------------------------------- -- ------ ----- -------------------- - ------ - ----------------------------------- -
现在我们可以在我们的 Angular 应用程序中使用 GitHub Gist，当应用程序启动时，该片段将在界面上显示。
示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
------------ --------------------------------
---------- ---------------------------------
--
------ ----- -------------------- -
------ - -----------------------------------
----------------- -
----------------- --------- -------
-
---------------- -
------------------- -------- -------
-
-<sgbj-gist [gistId]="gistId" (loaded)="gistLoaded($event)" (error)="gistError($event)" ></sgbj-gist>
总结
在本文中，我们学习了如何使用 npm 包 @sgbj/angular-gist 将 GitHub Gist 嵌入到 Angular 应用程序中，并提供了示例代码。使用 @sgbj/angular-gist，我们可以轻松地集成 GitHub Gist 到我们的 Web 应用程序中，让我们的代码变得更加易于阅读和分享。
希望这篇文章能够给大家带来帮助，在日常工作中能够更加方便地使用 GitHub Gist 接口。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567f381e8991b448e41a3