angular - Angular：如何避免剥离innerHtml？

Question

我想@ctrl/ngx-emoji-mart在聊天组件中显示表情符号。但我必须使用innerHtml如下设置数据。

<div [innerHtml]="message"></div>
message = "<ngx-emoji [emoji]="{ id: 'santa', skin: 3 }" size="16"></ngx-emoji>"

所以正如这里提到的，Angular 2: sanitizing HTML 剥离了一些 css 样式的内容。我用了以下pipe，

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'noSanitize' })
export class NoSanitizePipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {

   }
   transform(html: string): SafeHtml {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
}

现在 angular 不会像 那样剥离消息<h2>Hello</h2>，但如果消息包含 ngx-emoji 标签，则 angular 仍然会剥离。那么如何防止这种情况并在聊天消息中显示表情符号标签呢？

标签： angular