Question

我正在尝试将 Angular 12 应用程序集成到 ZK 应用程序中。

这是我的 index.zhtml：

<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:z="zul" xmlns="native" lang="fr">
  <head>
    <meta charset="utf-8">
    <title>ZK + Angular 12</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <z:div
      apply="org.zkoss.bind.BindComposer"
      viewModel="@id('vm')@init('com.c4_soft.zk_angular_demo.MyViewModel')"
      validationMessages="@id('vmsgs')">
        ...
        <z:button label="ZK ++" onClick="@command('cmd')"></z:button>
    </z:div>
    <app-root></app-root>
  </body>
</html>

我的问题（实际上是第一个，我预计还有很多其他问题）： “zul”命名空间中的属性区分大小写（例如 z:div viewModel 和 z:button onClick）但 ng build 将其转换为小写。

如何防止 ng build 在它不知道的命名空间中处理 xml 标签的属性大小写？

Answer 1

由于我来自 ZK 方面，我实际上不知道是否有编译器标志/开关是否禁用自动小写。

我认为 angular 在这里试图编译太多。 zhtml/zul-files 是 ZK 特定的格式，需要在运行时在服务器端由 ZK 的 DHtmlLayoutServlet 解析/执行。如果你用 ng build 处理这些文件，看起来这个编译器不知道 ZK 的语法并根据它自己的约定默认值更改/破坏事物（内部 angular 使用 parse5 html 解析器 deliberately switches all tag/attribute names to lowercase）

底线：您不能用 ng build 编译 zhtml/zul 文件。

相反，可以做的是将您的 Angular 应用程序编译成 JS，然后使用脚本标记将其包含到 zhtml 页面中。

<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:z="zul" xmlns="native" lang="fr">
  <head>
    <meta charset="utf-8">
    <title>ZK + Angular 12</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <script src="yourlibs.js"></script>
    <script src="morelibs.js"></script>
    <script>/*script initializing app-root*/</script>

  </head>
  <body>
    <z:div
      apply="org.zkoss.bind.BindComposer"
      viewModel="@id('vm')@init('com.c4_soft.zk_angular_demo.MyViewModel')"
      validationMessages="@id('vmsgs')">
        ...
        <z:button label="ZK ++" onClick="@command('cmd')"></z:button>
    </z:div>
    <app-root></app-root>
  </body>
</html>

这里有一些基于 angular 2 和 8 的现有集成示例的链接：

在这两种情况下，JS 文件都独立于实际构建过程显式添加到 zhtml/zul 文件中。

https://github.com/zkoss-demo/zkangular2/blob/master/src/main/webapp/hero/index.zhtml

https://github.com/zkoss-demo/client-binding-demo-angular/blob/master/src/main/resources/web/hello.zul

以上针对 ZK 作为 main 应用程序，并允许添加嵌套的 Angular 组件/页面。

如果你想让你的 angular 应用成为 main 应用，那么你可以看看 zk-embedded，它提供了一个 JS api 来将 zul 页面集成到任意的 html 页面中 ()

如何在`ng build`期间保留XHTML属性大小写？

1 个答案: