使用已知/声明的组件插入动态Angular 4.x内容

我有一个(我认为是一个相当常见的)问题,我找不到使用当前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 when HTML is inserted into main</p>
        </app-component>
        <app-component>
            <app-sub-component>
                angular components here might also contain other angular components
            </app-sub-component>
        </app-component>
        <p>more regular HTML content</p>
    </main>

    <!-- more Traditional Angular components Could come after -->
    <app-footer></app-footer>

</app-component>

我尝试了两种实现这一目标的方法,但两种方法都不起作用.

1.将动态模板/组件模式与JIT编译器一起使用.

TLDR;它不适用于AOT. AOT全有或全无.

我使用了像this one这样的动态组件模式.这很容易实现.使用JIT编译器,从HTML内容中创建一个新的组件和模块,并插入新组件的实例.只要项目没有编译AOT,这就可以工作.从Angular 4.x开始,JitCompilerFactory不能包含在AOT编译的构建中.似乎允许JIT Complier进入AOT编译构建可能是有意义的,因此已知组件可以获得性能提升,并且仅将JIT编译器用于动态组件.这将是两全其美的.但是,我不知道Angular的内部工作原理,我认为有充分的理由不允许使用JIT编译器.

2.使用Dynamic Component Loader Pattern模式

TLDR;无法获得加载组件的入口点.

在AOT构建中使用JIT编译器后,我想我可以使用COR_214_11845@ponentFactoryResolver.由于我只使用模块中已经声明的组件,因此我可以在HTML内容的位置创建一个组件.这个想法有点疯狂,但我认为它可能有用.我的方法看起来像这样：

>插入动态HTML内容

>以HTML格式获取动态内容
>不要使用DomSanatizer.bypassSecurityTrustHtml()删除Angular组件,
>并将其插入DOM

>解析插入的HTML组件

>使用{< app-SELEctor-String> ：ComponentClass} json表
>将所有组件作为DOM节点查找,并将它们与相应的ComponentClass相匹配

>在我想要插入组件的位置创建一个ViewContainerRef视图(这部分是不可能的)
>使用ViewContainerRef.createComponent(),创建适当组件的新实例

>插入它代替旧元素
>给作为old html组件内容的组件projectableNodes

>使用对它的引用为新组件提供输入.

这不起作用,因为无法在步骤3中动态创建ViewContainerRef.(在步骤3之后也可能无法执行任何操作.IDK.我没有那么远)

有没有办法做到这一点？我在想它吗？

谢谢！

// create a componentRef
const componentFactory = ComponentFactoryResolver.resolveComponentFactory(AngularComponent);
const componentRef = componentFactory.create(Injector);

// attach the componentRef to the angular ApplicationRef
ApplicationRef.attachView(componentRef.hostView);

// insert the root element of the new componentRef into any DOM node
const componentRoot: HTMLElement = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0];
const node = document.getElementById('insertionPoint'); 
Renderer2.insertBefore(node.parentNode,componentRoot,nodE);

// don't forget to destroy the component when you're done with it
ApplicationRef.detachView(componentRef.hostView);
componentRef.destroy();