小编Jam*_*ord的帖子

我有一个(我认为是一个相当常见的)问题,我找不到使用当前Angular 4.x架构解决的好方法.也许有一种方法我还没有找到,但我已经进行了广泛的搜索.

我想将一些动态的,用户生成的HTML内容插入到Angular应用程序中.这个HTML内容我还包括一些已知的(包含在模块声明中)应该呈现的角度组件.下面是一些puesdo-app HTML可能会帮助我解释:

<app-component>

    <!-- standard angular header and router-outlet -->
    <app-header>
        <app-nav>
            <ul>
                <li routerLink="/page-one">First Page</li>
                <li routerLink="/page-two">Second Page</li>
                <li routerLink="/page-three">Third Page</li>
            </ul>
        </app-nav>
    </app-header>
    <router-outlet></router-outlet>

    <!--
        the dynamic content would be inserted into the <main> element as HTML with angular <app-... tags
        the content in the HTML content inserted main tag could contain anything
        the angular components within the content should be initalized as normal
    -->
    <main>
        <h1>Title</h1>
        <app-component>
            <p>this component and its content should be initalized …

我在 angular 4 中插入这样的动态页面内容：

<app-component>
    <main [innerHTML]="dynamicHTML"></main>
</app-component>

这将呈现为：

<app-component>
    <main>
        <div>
            <div id="insertionPoint">
            </div>
        </div>
    </main>
</app-component>

是否有可能得到ViewContainerRef的div#insertionPoint已动态添加。在div#insertionPoint可能是被装载到一个大的HTML文档的任何地方<main>。

我想使用ViewContainerRef.createComponent()和ComponentFactoryResolver来在动态 HTML 中插入一个 Angular 组件。