Pipe Angular 变换内容标签

问题描述

在我的项目中，我有一个 wysiwig 编辑器，在这个编辑器中，我们有一个包含一些代码的标签,我有一个 angular 6 的管道，使用 Prism 是一个轻量级、可扩展的语法荧光笔。

import {PipeTransform,Pipe} from 'angular2/core';
import 'prismjs';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
// ...you can import further languages aswell

declare var Prism: any;
    
    @Pipe({ name: 'lightweight' })
    export class LightWeightPipe implements PipeTransform {
      transform(text: string,[search]): string {
        return search ? text.replace(new RegExp(search,'code'),`<span class="highlight">Prism.highlight(search,Prism.languages.javascript)</span>`) : text;
      }
    }

我的身体里有这个

<div [innerHTML]="body| lightweight: filter"></div>

但它不起作用......

我想要这个例子：

<div>
  <p>some text some text</>
  <ngb-tab title="Simple">
  </ngb-tab>
</div>

应该呈现这个：

    <div>
    <p>some text some text</>
    <pre class=" language-html"><code class=" language-html"> 
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ngb-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Simple<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ngb-tab</span><span class="token punctuation">&gt;</span></span>
   </code></pre>
    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-pipe