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