使用 Angular 创建一个将 Markdown 作为 HTML 显示的自定义 pipe

2 年 ago

科, 雅

1 minute

我要试着创建一个在 Angular 中将 Markdown 显示为 HTML 的 pipe。
我使用了一种经典的标记解析器 marked。

前提 tí)

本次使用的环境如下列所示。

$ ng -v
...
Angular CLI: 1.5.4
Node: 9.2.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.4
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.4
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1

操作过程

创建管道

安装 markd
(本次使用的版本为1.2.0)

$ npm i markd --save

在 Angular CLI 中创建一个管道。

$ ng generate pipe mdToHtml

我们将编辑之前创建的md-to-html.pipe.ts 文件。

import { Pipe, PipeTransform } from '@angular/core';
import * as marked from 'marked'; // markedをインポート

@Pipe({
  name: 'mdToHtml'
})
export class MdToHtmlPipe implements PipeTransform {

  // 追加
  mdToHtml(md: string): any {
    return marked(md);
  }

  transform(value: any): any {
    // pipeに流れてきた文字列をmarkedに渡す
    return this.mdToHtml(value);
  }
}

管道的实现仅限于上述情况。

用法 fǎ)

我会尝试使用管道从模板中获取数据。在使用angular-cli创建管道时，默认情况下会在app.module.ts中导入和声明，所以只需要从想要使用的组件模板中进行调用。

<div [innerHTML]="md | mdToHtml"></div>

我正在使用 innerHTML 属性将转换后的 HTML 绑定并显示出来。

这是一个例子。

这是一个类似于简单的Markdown编辑器。
（将左侧的文本区域输入的Markdown转换为HTML并在右侧显示）

<div fxLayout="row">
  <div fxFlex="50%">
    <textarea [(ngModel)]="md" cols="30" rows="50" style="width: 100%"></textarea>
  </div>
  <div fxFlex="50%">
    <div [innerHTML]="md | mdToHtml" style="padding: 10px"></div>
  </div>
</div>

在app.module中，我们导入了FormsModule和FlexLayoutModule，
在组件的类中只定义了一个变量md，用于存储输入的内容。

由于angular-cli提供了用于在模板中创建管道的命令，所以我们可以很轻松地将像本次使用的这样的库集成为管道。

前提 tí)

操作过程

创建管道

用法 fǎ)

这是一个例子。

请参考