我正在研究我们公司的JSF门户的新前端框架,并正在考虑Angular2.我想逐步将页面上的特定组件从JSF迁移到Angular2 / REST.我不想使用Angular2进行路由,至少现在还没有,我不希望Angular完全接管页面:在可预见的将来,某些组件仍然需要是JSF.
原文链接:https://www.f2er.com/angularjs/141762.html理想情况下,我用我的Angular根组件包装我的JSF模板主体的内容,并将JSF呈现的HTML投影到根组件中,以便JSF像以前一样工作,并且模板中的任何Angular组件都被拾取并且都可以沟通例如.:
<h:body> <my-app> <h:panelGroup styleClass="languageSwitcher"> <h:form> <h:selectOneMenu value="#{languageHandler.language}" onchange="submit()"> <f:selectItem itemValue="en" itemLabel="English" /> <f:selectItem itemValue="nl" itemLabel="Dutch" /> </h:selectOneMenu> </h:form> </h:panelGroup> <my-angular-component data-source="/rest/mydata"></my-angular-component> </my-app> <h:body>
使用Angular 1,我会使用transclusion来完成这项工作.但是,据我所知,Angular 2 content projection does not work on the root component,因为呈现的HTML不被视为Angular编译的视图.
我还考虑使用根组件的templateURL来动态获取JSF呈现页面,但这很难实现,并且不能很好地与JSF所做的众多POST一起使用.
我能想到的唯一方法是使每个Angular组件的根组件替换一些JSF,并在每个页面上引导我使用的所有组件.这里的缺点是我需要很多样板代码来引导我构建的每个Angular组件,并且它们没有共享的根组件,因此它们之间的通信是有限的.此外,我需要通过属性配置每个Angular组件,但是因为这些aren’t picked up automatically either我需要为每个组件添加自定义代码来获取它们:
class MyAngularComponent { constructor(public elementRef: ElementRef) { this.dataSourceUrl = this.elementRef.nativeElement.getAttribute("data-source"); } }
然后,当我最终用Angular替换整个前端时,我必须再次重构每个组件以使用@Input而不是手动从属性中检索信息.
有人知道更好的方法吗?或者JSF和Angular2根本不能很好地混合?