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

2018-07-02 07:31:12

我正在研究我们公司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不被视为角度编译的视图。

我还考虑过使用根组件的templateURL动态获取JSF呈现的页面，但这很难实现，并且不能很好地与JSF提供的大量POST结合使用。

我认为完成这项工作的唯一方法是为每个Angular组件创建一个根组件，以取代一些JSF，并在每个页面上引导所有使用的组件。这里的缺点是我需要很多样板代码来引导我构建的每个Angular组件，并且它们没有共享根组件，因此它们之间的通信受到限制。此外，我需要通过属性来配置每个Angular组件，但是因为这些不会自动拾取，所以我需要将自定义代码添加到每个组件以提取它们：

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

然后，当我最终用Angular替换整个前端时，我必须重新@Input每个组件来使用@Input ，而不是手动从属性中检索信息。

有没有人知道更好的方法来做到这一点？或者JSF和Angular2混合不好？

如果无法将整页作为重写单位，则必须分段分页并逐个移动它们。

只需占用页面的一部分，创建一个JSF组件，并通过仅重用HTML和CSS将其构建为完全引导的角度2应用程序。

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

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

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

在根级为应用程序构建一个包装器组件，之后，您可以慢慢开始切割代码以将您的代码块转换为您可以放置在其他HTML中的组件。

是的，你必须对@inputs进行重构，但你不需要同时做所有事情，一次启动一个Component，只需通过添加一个简单的包装器来启用Angular 2组件，以便于组件构建它适用于编译的HTML问题。

我对你的团队的建议是，从一个单独的项目开始干净而小，并且一次将一个功能迁移到新项目。 您将拥有更好的开发人员体验和范围确定，而不是在地方重写时发生混乱。

链接地址: http://www.djcxy.com/p/90077.html

上一篇: Integrate Angular2 into existing JSF project

下一篇: Cordova: Is there a way to detect whether Voice Dictation has ended on iOS