Angular 角动态分量加载

我正在学习Angular，我有一个带有API的CMS，可以返回页面内容。页面可以有表单的短代码，我已经更新了API，用组件选择器替换了短代码

示例页面内容如下所示

<div>bla bla bla </div>
<app-form [id]="1"></app-form>

some normal text
 <h2>Oh what a nice heading</h2>
 [galerie="summer_gallery"]
 text again

bla-bla-bla

在angular中，我创建了FormComponent来相应地加载表单，但当我使用上述选择器获取页面内容时，我得到了错误

“应用程序表单”不是已知元素：

---

我做了一些研究，发现我需要一些动态组件加载器，但根据我的场景找不到任何工作示例，有人能帮我解决这个问题吗？确实，您必须动态创建这些组件。请参阅此plunkr，以获取执行此操作的示例代码：

尽管Angular需要一个ViewContainer来知道在何处插入该动态组件。这将不起作用，因为您无法绑定到

innerHTML

，然后手动更改

innerHTML

的代码。我不确定，但我认为这会干扰angulars的变化检测

几个月前我不得不这么做，并想出了一个解决办法。在这一点上，我想说的是，我不确定现在是否有更好的办法来解决这个问题。无论如何，我所做的不是创建动态组件，而是使用*ngIfs创建一些自定义渲染。 让我解释一下：您的内容包含标签。您可以决定这些标记的外观。 在我的例子中，我有一个标签，用户可以在任何地方插入：

[galerie=“key\u of_gallery”]

。 所以内容可能看起来像

<div>bla bla bla </div>
<app-form [id]="1"></app-form>

some normal text
 <h2>Oh what a nice heading</h2>
 [galerie="summer_gallery"]
 text again

我想你明白了。 如果您创建一个包含更多标记的完整CMS，我建议您创建一个函数，该函数可以轻松地为标记创建整个过程（regex等）。 此示例代码仅用于一个标记

结果是组件被渲染到用户放置它们的正确位置。 我希望这对你有帮助

顺便说一句，如果用户有可编辑的键值对，您可能会发现这很有用：。这是我构建的一个小模块，可以使用ck编辑器编辑任何div

    <ffam-render-key-value [contentArray]="keyValues['_text'].arrayWithCustomTags">
    </ffam-render-key-value>

public getArrayWithCustomTags(keyValue): any[] {
        let arrayWithCustomTags: any[] = [];
        //check if custom Tag exists in the innerHTML
        if (keyValue.value.indexOf('[galerie=') !== -1) {
            //replace double quotes
            keyValue.value = keyValue.value.replace(/"/g, '"');
            //it exists, get array of all tags
            //regex that matches all [galerie="SOME KEY"] or [someAttribute="some text here"] -> You have to change this regex to fit all your tags
            let pattern = /(?:(\[galerie=\"[^\"]+\"\]))+/;
            //split with regexp to get array
            let arrayOfContents: string[] = keyValue.value.split(new RegExp(pattern, 'gi'));
            for (let i = 0; i < arrayOfContents.length; i++) {
                if (typeof arrayOfContents[i] === "undefined") {
                    arrayOfContents.splice(i, 1);
                    i--;
                }
                else {
                    let customTagToBeInserted: any = {};
                    if (arrayOfContents[i].indexOf('[galerie=') !== -1) {
                        //custom tag gallery
                        customTagToBeInserted.type = "gallery";
                        //get key only
                        customTagToBeInserted.key = arrayOfContents[i].replace("[galerie=\"", "").replace("\"]", "");
                    }
                    //else if some other attribute or even create a switch () {}
                    else {
                        //insert the normalHtml sanitized
                        customTagToBeInserted.type = "normal";
                        customTagToBeInserted.value = this.sanitizer.bypassSecurityTrustHtml(arrayOfContents[i]);
                    }
                    arrayWithCustomTags.push(customTagToBeInserted);
                }
            }
        }
        else {
            arrayWithCustomTags.push({ type: "normal", value: this.sanitizer.bypassSecurityTrustHtml(keyValue.value)});
        }
        return arrayWithCustomTags;
    }

[0]: {type: "normal", value:"SecureHTML"},
[1]: {type: "gallery", key:"summer_gallery"},
[2]: {type: "normal", value:"SecureHTML"},