将 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，我会使用嵌入来完成这项工作。但是，据我了解，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

如果您不能将整页作为重写单元，则必须将页面拆分为多个部分并一次迁移一个部分。

只需获取页面的一部分，创建一个 JSF 组件并使其成为一个完全引导的 Angular 2 应用程序，仅重用 HTML 和 CSS。

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

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

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

Answer 2

在根级别为您的应用程序创建一个包装组件，然后您可以慢慢开始对代码进行修改，将您的部分转换为可以放置在其他 HTML 旁边的组件。

是的，你必须重构 @inputs 但你不需要同时做所有事情，一次启动一个组件，只需通过添加一个简单的包装器在根目录启用 Angular 2 组件促进组件构建，解决您的 Compiled HTML 问题。

我对您的团队的建议是，首先将一个单独的项目变得干净且小巧，然后一次将一个功能迁移到新项目中。您将拥有更好的开发者体验和范围，而不是混乱的原地重写。