近年来，GitHub 已经成为前端技术人员和开发者们最常用的代码托管平台，在 GitHub 上分享代码和代码片段也变得越来越普遍。而 ng-gist 就是一个方便的 npm 包，它可以将 GitHub Gist 中的代码片段嵌入到任何 Angular 应用程序中。
在本文中，我们将介绍如何使用 ng-gist 包，以及如何在应用程序中嵌入 GitHub Gist。
什么是 ng-gist?
ng-gist 是一个 Angular 应用程序中的 npm 包，它允许你在应用程序中嵌入 GitHub Gist。ng-gist 提供了一个组件，你可以在你的应用程序中使用这个组件来嵌入 Gist。ng-gist 还提供了一些选项，例如显示/隐藏 Gist 文件列表、显示/隐藏 Gist 描述等。
安装 ng-gist
要使用 ng-gist，你首先需要安装它。打开终端并运行以下命令：
npm install ng-gist --save
在应用程序中使用 ng-gist
一旦你安装了 ng-gist，你就可以在你的应用程序中使用它了。要使用 ng-gist，首先要将相应的模块导入到你的应用程序中。打开你的 app.module.ts，并添加以下代码：
-- -------------------- ---- -------
------ - ------------ - ---- ----------
-----------
-------- -
--------------
------------
-----------
------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -现在，在你的组件 html 文件中使用 ng-gist，如下所示：
<ng-gist
gistId='30a0509808a899d89dee59ea85069300'
file='app/javascript/foo.js'
line='1'
showLineNumbers='true'
description='Hello, World!'>
</ng-gist>在该代码中，我们指定了要嵌入的 Gist ID、文件名、代码行以及其他选项。当你运行应用程序时，ng-gist 就会显示指定的 Gist 代码片段。
ng-gist 的选项
ng-gist 提供了多个选项，可以让你自定义在应用程序中嵌入的 Gist。这些选项包括：
gistId：要嵌入的 Gist ID。file：要显示的文件名。如果不指定该选项，则默认显示嵌入所有文件。line：要在哪一行开始显示代码。showLineNumbers：是否显示行数。description：要显示的 GitHub Gist 描述。loadingClass：当 Gist 正在加载时为组件添加的类。errorClass：当出现错误时为组件添加的类。
示例代码
在本节中，我们将展示一个完整的示例代码。这个示例将嵌入一个包含一个简单 Hello, World! 程序的 Gist。
首先，安装 ng-gist：
npm install ng-gist --save
接下来，将其导入到你的模块中。
-- -------------------- ---- -------
------ - ------------ - ---- ----------
-----------
-------- -
--------------
------------
-----------
------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -然后，将下面的代码添加到你的组件模板中：
<h1>My Angular App</h1>
<ng-gist
gistId='30a0509808a899d89dee59ea85069300'
file='app/javascript/foo.js'
description='Hello, World!'>
</ng-gist>现在，当你运行你的应用程序时，你将会看到嵌入的 Gist 代码片段。
总结
在本文中，我们介绍了如何使用 ng-gist 包嵌入 GitHub Gist 到 Angular 应用程序中。我们也介绍了如何使用 ng-gist 的选项，以自定义嵌入的 Gist 代码片段。希望这篇文章能够帮助你更好的使用此工具，并为你的开发工作带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d981e8991b448e0389