在前端开发过程中，难免会有需要使用 Markdown 渲染的需求，所以有一些优秀的 Markdown 渲染库即便是在 Angular2+ 环境下也比较受欢迎。其中，bt-ng2-md 作为一款优秀的 npm 包，提供了使用 Markdown 渲染的 Angular2+ 组件。本文将详细讲解 bt-ng2-md 的使用教程，包括安装、引入和使用。
安装
使用 bt-ng2-md 还需要安装 Markdown 包（bower、npm、cdn 等），它通过将 ng-md 组件集成到 Angular2+ 项目中，为客户端添加实时编译 Markdown 的功能。以下是 bt-ng2-md 的安装过程示例。首先，你需要在命令行终端中进入 Angular2+ 项目目录：
cd path/to/angular2-project-folder
然后，使用以下命令安装 bt-ng2-md：
npm install bt-ng2-md
后面将 bt-ng2-md 加入 Angular2+ 项目。针对不同版本的 Angular2+，你可以按照现有的版本或者安装指南的方式调整这些命令。由于 bt-ng2-md 使用 Angular2+ 进行开发，因此当其安装完毕时，也可以自动解析使用的 Angular2+ 版本并安装它。
安装完毕后就可以开始在你的项目中使用 bt-ng2-md 包了。
引入
接下来应该引入 bt-ng2-md 包。如果你的 Angular2+ 项目使用 SystemJS，可以在 systemjs.config.js 中定义 bt-ng2-md 包路径：
-- -------------------- ---- ------- --- ------------------ --- ---- - - ------ ------ ---------------- ---------------------------------------- ------------------ -------------------------------------------- -------------------- ------------------------------------------------ ---------------------------- ---------------------------------------------------------------- ------------------------------------ ------------------------------------------------------------------------ ------- ------------ ----------------------------- --------------------------------- -- --------- ------------ --------------------------- -- --------- - ------ - ----- ---------- ----------------- ---- -- ------- - ----------------- ---- -- ----------------------------- - ----- ----------- ----------------- ---- -- -- --------- ------------ - ----- -------- ----------------- ---- - -
使用
最后一步是使用 bt-ng2-md 的代码。可以在模块里引入 MdComponent 以使用 bt-ng2-md。在模板中使用 md 属性和相关的 Markdown 站点即可。
import {NgModule, Component, ElementRef} from '@angular/core'; import {MdComponent} from 'bt-ng2-md';
@Component({
selector: 'my-app',
template: <md [md]="markdown"></md>,
directives: [MdComponent]
})
export class AppComponent { markdown = '# My markdown'; constructor(private el: ElementRef) {} // Handle other input methods }
markdown 属性可以自行调整，允许你使用自定义的 Markdown 站点或者外部服务 API、直接输入等。
这就是 bt-ng2-md 的使用过程。使用 bt-ng2-md 时请一定注意安装和引用，否则可能导致组件未能正常运行或者产生各种其他问题。
总结
在本文中，我们介绍了如何安装、引入和使用 bt-ng2-md，一款强大的 npm 包，提供了使用 Markdown 渲染的 Angular2+ 组件。使用 bt-ng2-md 可以大大简化在 Angular2+ 中使用 Markdown 的过程，更便于前端工程师在开发过程中进行 Markdown 格式处理，提高生产效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb781e8991b448da3c4