Question

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

理想情况下，我用我的Angular根组件包装我的JSF模板主体的内容，并将JSF呈现的HTML投影到根组件中，这样JSF就像以前一样工作，模板中的任何Angular组件都是拿起来都可以沟通。 E.g：

<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根本不能很好地混合？

Answer 1

如果您无法将整页作为重写单位，则必须分段拆分页面并一次迁移一个部分。

只需重新使用HTML和CSS，只需获取页面的一部分，创建一个JSF组件并使其成为完全自举的角度2应用程序。

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

与使用角度2和静止控制器一次一页地重写应用程序相比，它可能都不值得。

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

Answer 2

在根级别为您的应用程序创建一个包装器组件，然后您可以慢慢开始删除您的代码，将您的组件转换为可以放在其他HTML旁边的组件。

是的，您必须完成@inputs的重构，但您不需要同时执行所有操作，一次启动一个组件，只需添加一个简单的根目录即可启用Angular 2组件包装器，以方便组件构建，解决您的编译HTML问题。

我对您的团队的建议是首先要使一个单独的项目变得干净小，然后一次将一个功能迁移到新项目。您将获得更好的开发人员体验和范围，而不是乱糟糟的重写。

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

2 个答案: