Question

场景我有一个Angular 4应用程序，我使用contentful作为内容管理系统。因此，在内容丰富的情况下，它们具有用作降价的功能。在单页应用程序中提到的降价中，它是集成的，并使用管道mdToHtml来获取满意的降价字段中内容的结果。

问题：除了子弹点和复选框之外，内容式降价选项适用于角度应用程序。我按照建议使用https://www.npmjs.com/package/marked模块。

满足于无序列表：我使用了

示例：

* List
* List 2

也试过

- List
- List2

所以，但它没有显示要点，内容也很好分开。

示例2：复选框

- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)

然而，与分割句子但不显示复选框的结果相同。任何的想法？因为其他部分如标题，锚标签工作正常。

这就是我的管道的样子

import { Pipe, PipeTransform } from '@angular/core';
import * as marked from 'marked';

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

  constructor() {
  }

  transform(value: string): any {
    return marked(value || '');
  }

}

HTML

<p [innerHtml]="example.welcomeParagraph | mdToHtml">

Answer 1

使用标记的库，您应该在正确的HTML输出中获取列表。请参阅我在此处创建的StackBlitz：https://stackblitz.com/edit/angular-oahnaa

输出，

* astrix 1
* astrix 2

是：

<ul> <li>astrix 1</li> <li>astrix 2</li>

如果正确生成了标记，您应该能够通过向ul元素添加正确的样式来获取项目符号。

ul {
  list-style-type: circle; /* this should be the default style */
}

至于复选框，它们不是GFM规范的主要部分。因此，它不支持开箱即用。请参阅此问题：https://github.com/markedjs/marked/issues/689

您应该能够使用该问题中给出的代码扩展渲染器：

var renderer = new marked.Renderer();
renderer.listitem = function(text) {
if (/^\s*\[[x ]\]\s*/.test(text)) {
text = text
  .replace(/^\s*\[ \]\s*/, '<i class="empty checkbox icon"></i> ')
  .replace(/^\s*\[x\]\s*/, '<i class="checked checkbox icon"></i> ');
    return '<li style="list-style: none">' + text + '</li>';
  } else {
    return '<li>' + text + '</li>';
  }
};

子弹点和复选框不适用于降价

1 个答案: