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

Question

我有一个(我认为是一个相当常见的)问题,我找不到使用当前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全有或全无.

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

2.使用动态组件加载器模式模式

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

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

1. 插入动态HTML内容
   • 获取动态内容为HTML
   • 不要使用DomSanatizer.bypassSecurityTrustHtml(),删除Angular组件,
   • 并将其插入DOM
2. 解析组件的插入HTML
   • 使用{<app-selector-string> : ComponentClass}json表
   • 将所有组件作为DOM节点查找,并将它们与相应的ComponentClass相匹配
3. ViewContainerRef在我想要插入组件的位置创建一个视图(这部分是不可能的)
4. 使用ViewContainerRef.createComponent(),创建适当组件的新实例
   • 插入它代替旧元素
   • 给出作为projectableNodes旧html组件内容的组件
5. 使用对它的引用为新组件提供输入.

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

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

谢谢!

Answer 1

这很有可能，其实...

AngularApplicationRef有一个attachView()方法可以跟踪新的组件引用。然后可以像常规组件一样将该组件引用插入到任何位置。

这是一个伪代码示例：

// 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();

更好的解释在这里