如何在 Angular 14 中使用 ngx-markdown 渲染内容内的子组件

Question

我已经用头撞墙有一段时间了，现在试图解决这个问题。我们有来自 Epi 服务器的内容，内容是 HTML 格式，需要在组件中动态渲染。

当它只是“标准”html 元素时，我们使用 ngx-markdown 非常成功地做到了这一点。 但有时我们会渲染组件元素，但 ngx-markdown 似乎只是忽略了这些元素，我可以在检查页面时看到它们，但它们并没有真正像组件一样加载。

这是如何设置的：

动态markdown.component.html

`<markdown [data]="html"></markdown>`

动态markdown.component.ts

import { Component, Input, OnInit } from "@angular/core";


@Component({
  selector: 'dynamic',
  templateUrl: './dynamic-markdown.component.html'
})
export class DynamicMarkdownComponent implements OnInit {

  
  constructor() { }

    @Input() html: any;

    ngOnInit() {
    }
}

这就是动态组件如何加载到其他组件中的：

<dynamic [html]="mainBody.toString()" ></dynamic>

这是我们从“mainBody.toString()”内的服务器获取的内容，我们试图在动态组件中显示：

<p><download-file url="/api/document/51ecd42259554e88b93b5dd60de22105/Sortimentskiftesrapport 2017-12-01 (1)" [displaytext]="'Hämta bilagan med ändringsmarkeringar (xlsx)'"></download-file>.</p>

“download-file”是我们自己的组件，我们正在尝试加载。

到目前为止，“p”标签和“.”最后就是所显示的一切。检查页面时，我可以看到“p”标签之间有一个元素，但它没有显示任何内容。

我可以确认组件应该显示内容，因为如果我只是将其硬编码到页面中，它就会显示得很好。

这是在 Angular 14 中，以及 ngx-markdown@^14.0.1

有谁知道为什么会发生这种情况，或者我如何才能使 markdown 组件成功加载组件？

我尝试浏览我能找到的所有文档：https://jfcere.github.io/ngx-markdown，看看是否在内容中加载组件时指定了任何内容。我也在网上到处搜索，但似乎找不到其他人有同样的问题。

Answer 1

就我而言，解决方案的一部分是使用

[disableSanitizer]="true"

禁用 Markdown 组件上的消毒剂