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

Question

在特定的项目框架中，我们使用WCM Jahia集成我们的Angular 5模块，以在网站的各个页面中显示它们。

WCM jahia属性我们必须恢复以集成它们并在我们的模块Angular 5中使用它，它包括恢复某些数据的键/值列表。

我们设法暂时编写此解决方案，并且它可以工作（除了在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));
};

问题是，如果因为window['run']而使用IE9（我们没有引导Angular 5应用程序），这个解决方案不起作用...

问题是，是否有另一种方法从JAHIA Jsp中检索变量/值列表并在provide Angular之前将其注入bootstrapModule？

Answer 1

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

这包括取消注释与IE9，IE10和IE11浏览器相关的polyfills.ts文件的一部分。

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';

我希望这可以帮助同一案件中的某个人。