Markdown 是一种轻量级的标记语言，它最初由 John Gruber 创造，旨在让人们写作简洁、易读易写。在 web 开发中，我们经常需要将 Markdown 格式的文本转换成 HTML，以展示在网页中。而 ng2-markdown-directive 是一款 Angular 的 npm 包，它提供一种简便的途径，通过 directive 的方式来实现 Markdown 到 HTML 的转换。
安装
使用 ng2-markdown-directive 首先需要进行安装。在终端中输入以下命令：
npm install ng2-markdown-directive
安装完成后，还需要在 Angular 应用的模块中进行引入。在需要使用 ng2-markdown-directive 的模块中引入 MarkdownModule，将其加入 imports 数组中。
-- -------------------- ---- -------
------ - -------------- - ---- -------------------------
-----------
-------- -
--------------
-------------------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -使用
在视图的 HTML 模板中，我们要使用 ng2-markdown-directive 需要在标签上声明 directive。
<div markdown> # Angular + Markdown = ❤️️ </div>
在这个 div 标签上，我们声明了 markdown directive。这就告诉 Angular，这个 div 中包含 Markdown 的内容，需要进行转换。
指令参数
ng2-markdown-directive 还提供了一些参数，以便更加方便地定制转换的方式。下面列出一些常用的参数：
sanitize
sanitize 参数控制 ng2-markdown-directive 是否过滤不安全的 HTML 标签。
<div markdown [sanitize]="true"> # 这是一段含有 HTML 标签的 Markdown <div>这是一个 div 标签</div> </div>
当 sanitize 参数为 true 时，ng2-markdown-directive 会过滤掉 div 标签。
baseUrl
baseUrl 参数可以设置文档中的相对链接的内容。这在使用相对链接时很有用。
<div markdown [baseUrl]="assets/markdown/"> # 这是一段包含相对链接的 Markdown [点我跳转](test.md) </div>
当 baseUrl 参数设置为 "assets/markdown/" 时，相对链接将以这个路径作为根目录，展现出正确的页面。
示例代码
下面是一个完整的代码示例，展示了 ng2-markdown-directive 的使用方式和相关参数。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------------
------------
--------- -----------
--------- -
---- -------- ----------------- -----------------------------
- -------- - ---- ---
----------
- -----------
- -----------
- -------
-- ----
----- ------- ------------------------
-------------
------ - -------------- - ---- -------------------------
-----------
-------- -
-------------------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -
---
-- ----
- ----------------------- ------------------------------
- ----------------------- ------ ----------------------------------------------------
------
-
--
------ ----- ------------ - -这是一个简单的组件，其中使用了 ng2-markdown-directive 转换了一个 Markdown 的文本。同时，还展示了 ng2-markdown-directive 的一些参数的用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005538981e8991b448d0b94