我正在为我们公司的 JSF 门户研究一个新的前端框架,并且正在考虑使用 Angular2。我想逐渐将页面上的特定组件从 JSF 迁移到 Angular2/REST。我不想使用 Angular2 进行路由,至少现在还不想,我也不希望 Angular 完全接管页面:在可预见的 future ,一些组件仍然需要是 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 编译 View 。
我还考虑过使用根组件的 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 不能很好地结合?
最佳答案
如果您不能将整个页面作为重写单元,则必须将页面分成几个部分,然后一次迁移一个部分。
只需获取页面的一部分,创建一个 JSF 组件,并通过仅重用 HTML 和 CSS 使其成为一个完全引导的 Angular 2 应用程序。
如果您需要将其集成到 JSF 生命周期中而不是调用 REST Web 服务,则需要将 Angular 2 生成的数据注入(inject) JSF 表单的隐藏字段中。将数据放入 JSON 格式并使用 Jackson 在服务器上反序列化。
与使用 angular 2 和 rest Controller 一次重写应用程序一页相比,这一切可能都不值得。
您可以将服务器配置为重定向某些页面以提供 Angular 2 页面的静态文件,而其余页面则保留在 JSF 下。
关于jsf - 将 Angular2 集成到现有的 JSF 项目中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35207237/