使用已知/声明的组件插入动态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编译器后,我想我可以使用ComponentFactoryResolver.由于我只使用模块中已经声明的组件,因此我可以在HTML内容的位置创建一个组件.这个想法有点疯狂,但我认为它可能有用.我的方法看起来像这样: >插入动态HTML内容 >以HTML格式获取动态内容 >解析插入的HTML组件 >使用{< app-selector-string> :ComponentClass} json表 >在我想要插入组件的位置创建一个ViewContainerRef视图(这部分是不可能的) >插入它代替旧元素 >使用对它的引用为新组件提供输入. 这不起作用,因为无法在步骤3中动态创建ViewContainerRef.(在步骤3之后也可能无法执行任何操作.IDK.我没有那么远) 有没有办法做到这一点?我在想它吗? 谢谢! 解决方法
这很可能,实际上……
Angular的ApplicationRef有一个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(); 更好的解释here (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |