Question

我有一个Angular组件，它使用PrismJS来突出显示语法代码块。该组件如下：

rawContent

问题在于，当我使用它时，我必须手动转义任何无效的HTML字符。

我尝试在以下位置对组件元素引用值和ngOnChanges()引用值使用DomSanitizer。sanitize（），以试图规避这一点：

构造
ngOnInit()
ngAfterViewInit()
rawContent

当代码块包含无效的HTML字符时，Angular会在发生任何这些事件之前抛出无效字符错误。

我如何清理{{1}}中指定的代码块以防止手动转义无效的HTML字符？

示例StackBlitz Solution

Answer 1

使用CDATA（Character Data）：

<prism language="typescript">
  <![CDATA[ export class Demo { id: number; name: string; } ]]>
</prism>

Answer 2

从角度5.2开始，由于单个括号的解释方式，目前无法实现。使用ngNonBindable不适用于单括号

https://github.com/angular/angular/issues/11859

这将失败

<div>
  Test content with a bracket {
</div>

要在模板中包含带有支持的字符串，您需要将字符串分配给组件的变量

//component.ts
 snippet = `export class Demo {
   id: number;
   name: string;
}`;

//component.html
<sanitized-prism [snippet]="snippet" language="typescript"></sanitized-prism>

SanitizePrismComponent

import {
  Component,
  AfterViewInit,
  Input,
  ChangeDetectorRef,
  SecurityContext
} from '@angular/core';

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

declare var Prism: any;

@Component({
  selector: 'sanitize-prism',
  template: `
  <section class="code-container">
    <pre><code [innerHtml]="content" class="block language-{{language}}"></code></pre>
  </section>
  `
})
export class SanitizePrismComponent implements AfterViewInit {
  @Input() snippet: string;
  @Input() language: string;
  content: SafeHtml;

  constructor(public cdr: ChangeDetectorRef, public sanitizer: DomSanitizer) { }

  ngAfterViewInit() {
    this.content = this.sanitizer.bypassSecurityTrustHtml(
      this.sanitizer.sanitize(
        SecurityContext.HTML, 
        Prism.highlight(this.snippet, Prism.languages[this.language])));
    this.cdr.detectChanges();
  }
}

如果你真的想在模板文件中用括号硬编码字符串，那么你可以使用这些解决方案：

编码括号

export class Demo &#123; id: number; name: string; &#125;

（这是你已经拥有的）

在插值表达式中包装所有内容

{{"export class Demo { id: number; name: string; } }"}

注意：如果字符串包含douoble引号，则需要使用\"

转义它们

{{"  let: str = \"string\"; "}}

转义括号（如angular的错误消息所示）

export class Demo {{'{' }} id: number; name: string; {{   '}'}

将您的代码包装在CDATA中（@Juan Mellado的建议）

<prism language="typescript">
  <![CDATA[ export class Demo { id: number; name: string; } ]]>
</prism>

最后一个如果是最干净的方式恕我直言

消除代码片段的ng-content

2 个答案:

SanitizePrismComponent