从视图调用SAPUI5控件有效，嵌入在XMLComposite控件中不起作用（全局外部库）

Question

我正在尝试构建amCharts容器控件，这是一个通过amCharts构建的图形的UI5控件。一般来说，它可以工作，但是我敢肯定，您可以发现很多可以做得更好的技巧。

目前我最大的问题是，当我从另一个XMLComposite控件中使用该控件时出现错误

Uncaught ReferenceError：在f.onAfterRendering上未定义am4core（AmChartContainer.js？eval：38）

调试之前已执行jQuery.sap.includeScript的代码证明，但全局元素am4core仍然不可用。当我直接将控件嵌入到视图中时，它可以工作。

我不满意的另一件事是事件顺序。很想实例化render方法中的amchart，但是在那时，没有htmlelement，这是amchart实例化所需要的。同意吗？

将不胜感激！

sap.ui.define([ 'sap/ui/core/Control', "jquery.sap.global" ], function(Control, jQuery) {
    return Control.extend("io.rtdi.amChartContainer", {
        metadata: {
            properties: {
                width: {
                    type: "sap.ui.core.CSSSize",
                    defaultValue: "100%"
                },
                height: {
                    type: "sap.ui.core.CSSSize",
                    defaultValue: "100%"
                },
                plugin: {
                    type: "string"
                }
            },
            aggregations : {},
        },
        renderer : function(oRm, oControl) {
            oRm.write("<div");
            oRm.write(" style=\"width: " + oControl.getWidth() + 
                       "; height: " + oControl.getHeight() + ";\" ");
            oRm.writeControlData(oControl);
            oRm.write(">");
            oRm.write("</div>");
        },
        onBeforeRendering : function() {
            jQuery.sap.includeScript("https://www.amcharts.com/lib/4/core.js",
                "amCharts.core", null, null);
            jQuery.sap.includeScript("https://www.amcharts.com/lib/4/charts.js",
                "amCharts.charts", null, null);
            if (!!this.getPlugin()) {
                jQuery.sap.includeScript(
                       "https://www.amcharts.com/lib/4/" + this.getPlugin(), 
                       "amCharts.plugin", null, null);
            }
        },
        onAfterRendering : function() {
            // if I need to do any post render actions, it will happen here
            if (sap.ui.core.Control.prototype.onAfterRendering) {
                sap.ui.core.Control.prototype.onAfterRendering.apply(this, arguments);
            }
            this._chart = am4core.create(this.getId(), am4plugins_forceDirected.ForceDirectedTree);
        },
        getChart: function() {
            return this._chart;
        }
    });
});

Answer 1

调试之前执行过includeScript的代码证明。全局变量am4core仍然不可用。

乍一看，我假设在[[amCharts lib完全加载（通过includeScript）和执行onAfterRendering时之间存在竞争状态，因此，在某些情况下am4core不可用案例..

[为优化行为，请尝试在应用程序的生命周期内加载一次图表库（单例），并使用init在每个控件实例的sap/ui/core/HTML module中创建实际图表。像这样：

sap/ui/core/HTML

渲染器
metadata: {
  // ...
  aggregations: {
    "_html": {
      type: "sap.ui.core.HTML",
      visibility: "hidden",
      multiple: false,
    }
  }
},
init: function() {
  // ...
  const chartElement = /* generating amChart HTML element.. */
  const container = new /*sap/ui/core*/HTML().setDOMContent(chartElement);
  this.setAggregation("_html", container);
}