将Angular2集成到现有的JSF项目中

Question

我正在为我们公司的JSF门户网站寻找一个新的前端框架,我正在考虑使用Angular2.我想逐步将页面上的特定组件从JSF迁移到Angular2/REST.我不想使用Angular2进行路由,至少现在还没有,我不希望Angular完全接管页面:在可预见的将来,某些组件仍然需要是JSF.

理想情况下,我用我的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内容投影不适用于根组件,因为呈现的HTML不被视为Angular编译视图.

我还考虑使用根组件templateURL动态获取JSF呈现页面,但这很难实现,并且不能很好地与JSF所做的众多POST一起使用.

我能想到的唯一方法是使每个Angular组件的根组件替换一些JSF,并在每个页面上引导我使用的所有组件.这里的缺点是我需要很多样板代码来引导我构建的每个Angular组件,并且它们没有共享的根组件,因此它们之间的通信是有限的.此外,我需要通过属性配置每个Angular组件,但由于这些不是自动拾取的,我还需要为每个组件添加自定义代码以进行拾取:

class MyAngularComponent {
  constructor(public elementRef: ElementRef) {
    this.dataSourceUrl = this.elementRef.nativeElement.getAttribute("data-source");
  }
}

然后,当我最终用Angular替换整个前端时,我必须再次重构每个组件,而@Input不是手动从属性中检索信息.

有人知道更好的方法吗？或者JSF和Angular2根本不能很好地混合？

Answer 1

如果无法使整页成为重写单位，则必须将页面分成几部分，然后一次迁移一个部分。

只需浏览页面的一部分，创建JSF组件，并通过仅重用HTML和CSS，使其成为完全自举的angular 2应用。

如果需要将其集成到JSF生命周期中而不是调用REST Web服务，则需要将由angular 2生成的数据注入JSF表单的隐藏字段中。将数据以JSON格式放置，然后使用Jackson将其反序列化在服务器上。

与使用angular 2和rest控制器一次重写一个应用程序页面相比，这可能不值得。

您可以将服务器配置为重定向某些页面以提供Angular 2页面的静态文件，而其余页面保留在JSF下。