如何从 JSP 获取值并将它们注入 Angular 5 组件 (main.ts)

Question

在一个具体的项目框架中，我们使用WCM Jahia 来整合我们的Angular 5个模块，以将它们显示在网站的各个页面中。

我们必须恢复 WCM jahia 属性以将它们集成并在我们的模块中使用它们 Angular5，它包括恢复一些数据的 key/value 列表。

我们暂时设法编写了这个解决方案，它有效（IE9 除外）：

file_name.jsp

<script type="text/javascript" src="...../dist/polyfills.bundle.js"> </script>
<script type="text/javascript" src="...../dist/vendor.bundle.js"> </script>
<script type="text/javascript" src="...../dist/main.bundle.js"> </script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var myProperties = {
            //For example
            codes: "codes",
            labels: "labels"
        };
        window.run(myProperties);
    });
</script>

<app-myApp></app-myApp>

main.ts

window['run'] = (myProperties) => {
  platformBrowserDynamic([
    {
      provide: 'myProperties',
      useValue: myProperties
    },
    ...
  ])
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
};

问题是，如果我们使用 IE9（我们无法使用 bootstrap Angular 5 应用程序），此解决方案将不起作用，因为 window['run']...

问题是，是否有另一种方法从 JAHIA Jsp 中检索 variable/value 的列表并将其注入 provide 之前的 bootstrapModule Angular?

Answer 1

经过一些研究和几滴汗水，终于找到了解决方案。

这包括取消注释 polyfills.ts 文件中与 IE9、IE10 和 IE11 浏览器。

polyfills.ts

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

希望对遇到同样情况的人有所帮助。

如何从 JSP 获取值并将它们注入 Angular 5 组件 (main.ts)

How to get values from a JSP and inject them into the Angular 5 component (main.ts)

javascript

internet-explorer-9

jahia

angular

angular5