Javascript InnerHTML中的角度指令

我知道不可能在内部html中沿html代码注入angular指令，有什么解决办法吗？我试图从html文件中读取html和指令，并将其插入

div

，我考虑使用组件工厂动态创建组件，但html文件中的指令可以在代码中的任何位置，我不确定如何将其附加到dom中的正确位置，我没有太多的经验与组件工厂，所以请让我知道，如果有一种方法

ngOnInit(): void {

    let loading = this.loadingService.addTask();

    this.route.paramMap
        .take(1)
        .subscribe(params => {
            let page: string = params.get("page") || "";

            if (page) {
                this.trainingService.getPageContent(page)
                    .take(1)
                    .subscribe(res => {
                        this.content = res;
                        this.loadingService.completeTask(loading);
                    })
            }
            else {
                this.loadingService.completeTask(loading);
            }
        },
        error => {
            this.notificationService.error("Error retrieving training page", error);

            this.loadingService.clearAllTasks();
        })

这是我的模板

<div [innerHtml]="content"></div>

下面是一个应该注入的html页面示例（这是一个外部html页面文件）

---

没有办法做到这一点。解决方法是改变注入html的方式。编写一个子组件，为它提供正确的信息（作为[json-]对象！），然后就可以开始了，而不是以html的形式注入

若您不能控制传入的信息（在您的例子中是html），那个么您必须将它塑造成一个对象，这样您就可以使用它

在最近的一个项目中，我必须有可能包含iFrame的文本内容（iFrame在angular中不能很好地工作）。解决方案是在后端将内容解析并保存为JSON对象，其中包含正确顺序的文本和iframe部分（不幸的是，这需要花费一些时间）。一旦我在Angular中掌握了它，我就可以使用typescript注入JSON对象的文本和iFrame。当然，为正确的元素做正确的事情

---

因此，如果您可以控制传入的信息（无论是html还是任何类型的可识别对象），那么您应该在这里更改过程（并充分利用angular MVC）。如果您对此没有控制权，请提供更多详细信息，说明需要做什么以及具体情况。

您是说将html从一个组件注入到另一个组件吗？我从外部html文件读取html，然后注入它。除非您控制html源，将其注入应用程序是一个非常糟糕的主意。如果确实要执行此操作，请在将内容绑定到

innerHtml

之前，注入

消毒剂

，并通过

bypassSecurityTrustHtml

运行内容。您可以从CDK使用DomPortalOutlet。我是唯一一个控制html源代码的人，你能给我一些关于这种方法的信息吗？我可以看一下任何链接或示例吗？

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default b">
            <div class="panel-body">
                <div class="row">
                    <!--the directive-->
                    <sa-azure-media-player [source]="the link"></ss-azure-media-player>
                </div>
            </div>
        </div>
    </div>
</div>