Angular - 如何使用带有 markdown 的管道

Question

我正在尝试“管道”我的 Markdown 文件，这样它就不会清理我的 Markdown 文件中的内联样式。我使用 Angular ngx-markdown (12.0.01)。

Markdown 组件

@Component({
  selector: 'documentation-markdown',
  template: `
    <div class="markdown-padding">
      <markdown [src]="file"></markdown>
    </div>
  `,
  styleUrls: ['./markdown.documentation.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownDocumentation implements OnInit {

  constructor(private route: ActivatedRoute, private _change: ChangeDetectorRef,) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe( (map) => {
      this.file = map.get('file') ?? '';
    });
  }

  private _file: string | undefined = undefined;
  public get file() : string | undefined {
    return this._file;
  }
  public set file(value: string | undefined){
    if( value ) {
      this._file = `assets/markdown/${value}.md`;
    } else {
      this._file = undefined;
    }
    this._change.detectChanges();
  }

}

我正在尝试显示 Markdown 文件

| Token             | Value          | Example    | Inheritance    |
|-------------------|----------------|------------|----------------|
| <div><code class="token-name">kite-button-background-color</code></div> | <div class="token-value">#0073d1<br />rgb(0, 115, 209)</div> | <div class="token-example--color" style="background-color: #0073d1; border: 1px solid var(--kite-color-text, #000); border-color: var(--kite-border-color, #d8dde6); border-radius: var(--kite-size-32, 2rem); height: var(--kite-size-32, 2rem); width: var(--kite-size-32, 2rem);"></div> | <ul class="token-inheritance-list" style="list-style:none; margin:0; padding:0;"><li style="margin:0; padding:0;"><code class="token-name">⬇︎ #0073d1</code></li><li style="margin:0; padding:0;"><code class="token-name">⬇︎ kite-color-blue-20</code></li><li style="margin:0; padding:0;"><code class="token-name">⬇︎ kite-color-primary</code></li><li style="margin:0; padding:0;"><code class="token-name">● kite-button-background-color</code></li></ul> |

我被告知使用卫生管道来渲染内联样式：

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

@Pipe({
  name: 'TrustPipe'
})
export class TrustPipe implements PipeTransform {
  constructor(private _sanitizer: DomSanitizer){}
  transform(value: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }
}

我对 Markdown 的了解非常有限，并且我在尝试弄清楚如何使用这个管道以便我的内联样式将显示在页面上时遇到了最困难的时期。任何帮助或指导将不胜感激。

Answer 1

我通过添加解决了这个问题：

MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE }),

到应用程序模块