Sapui5 Component.js何时加载？

我正在尝试运行SAPUI5应用程序。我创建了一个带有视图piecharts的视图，并通过引用其ID

内容将它们添加到
index.html
中


var app=新的sap.m.app（）；
var page=sap.ui.view({
视图名称：“…”，
类型：sap.ui.core.mvc.ViewType.XML
});
app.addPage（第页）；
附件placeAt（“内容”）；

我现在的问题是没有调用
组件.js
。所以我没有机会使用路由，因为路由器没有初始化

我尝试了一些不同的方法，比如：


sap.ui.getCore（）.attachInit（函数（））{
新sap.m.Shell({
应用程序：新sap.ui.core.ComponentContainer({
高度：“100%”，
名称：“vizFrame.gettingStarted.demoVizFrame”
})
}).placeAt（“内容”）；
});

在这种方法之后，
Component.js
被触发，但是页面是空的。“我的根视图”的内容不显示

manifest.json
{
“_版本”：“1.12.0”，
“sap.app”：{
“id”：“vizFrame.gettingStarted.demoVizFrame”，
“类型”：“应用程序”，
“i18n”：“i18n/i18n.属性”，
“应用程序版本”：{
“版本”：“1.0.0”
},
“标题”：“{appTitle}}”，
“描述”：“{appDescription}}”，
“源模板”：{
“id”：“ui5template.BasicSAP UI5ApplicationProject”，
“版本”：“1.40.12”
}
},
“sap.ui”：{
“技术”：“UI5”，
“图标”：{
“图标”：“，
“法维康”：“法维康”，
“电话”：“，
"phone@2": "",
“药片”：“药片”，
"tablet@2": ""
},
“设备类型”：{
“桌面”：没错，
“平板”：没错，
“电话”：真的吗
}
},
“sap.ui5”：{
“flexEnabled”：错误，
“根视图”：{
“viewName”：“vizFrame.gettingStarted.demoVizFrame.view.VizChart”，
“类型”：“XML”
},
“依赖项”：{
“MINUI5版本”：“1.60.1”，
“libs”：{
“sap.ui.layout”：{}，
“sap.ui.core”：{}，
“sap.m”：{}
}
},
“内容密度”：{
“紧凑”：没错，
“舒适”：真的吗
},
“模型”：{
“i18n”：{
“类型”：“sap.ui.model.resource.ResourceModel”，
“设置”：{
“bundleName”：“vizFrame.gettingStarted.demoVizFrame.i18n.i18n”
}
}
},
“资源”：{
“css”：[
{
“uri”：“css/style.css”
}
]
},
“路由”：{
“配置”：{
“路由类”：“sap.m.routing.Router”，
“视图类型”：“XML”，
“异步”：true，
“视图路径”：“vizFrame.gettingStarted.demoVizFrame.view”，
“控制聚合”：“页面”，
“controlId”：“应用程序”，
“clearControlAggregation”：false
},
“路线”：[
{
“名称”：“RouteVizChart”，
“模式”：“RouteVizChart”，
“目标”：[“目标图表”]
},
{
“图案”：“细节”，
“名称”：“详细信息”，
“目标”：“细节”
}
],
“目标”：{
“目标图表”：{
“视图类型”：“XML”，
“过渡”：“幻灯片”，
“clearControlAggregation”：false，
“视图ID”：“VizChart”，
“视图名称”：“VizChart”
},
“testView”：{
“视图类型”：“XML”，
“视图名称”：“testView”，
“视图ID”：“testView”，
“视图级别”：2
},
“细节”：{
“视图类型”：“XML”，
“视图名称”：“详细视图”
}
}
}
}
}

Component.js
sap.ui.define([
“sap/ui/core/UIComponent”，
“sap/ui/Device”，
“vizFrame/gettingStarted/demoVizFrame/model/models”
]，功能（组件、设备、型号）{
“严格使用”；
返回UIComponent.extend（“vizFrame.gettingStarted.demoVizFrame.Component”{
元数据：{
清单：“json”
},
init：函数（）{
UIComponent.prototype.init.apply（这是参数）；
这个.getRouter（）.initialize（）；
此.setModel（models.createDeviceModel（），“设备”）；
}
});
});

VizChart.view.xml
这是仅显示页面标题的根视图：



ComponentContainer
从
index.html
component.js
加载文件中引用的组件描述符（manifest.json-用于声明依赖项的应用程序描述符文件）
component.js
创建根视图、默认和资源（i18n）模型

index.html

sap.ui.getCore().attachInit(function () {
    new sap.ui.core.ComponentContainer({
        name: "ABC.AppName"
    }).placeAt("content");
});

component.js

sap.ui.core.UIComponent.extend("ABC.AppName.Component", {
    metadata : {
        includes: [jQuery.device.is.phone ? "assets/css/mStyle.css" : "assets/css/dStyle.css"]
    },
    createContent: function () {
        // create root view
        var oView = sap.ui.view({
            id: "app",
            viewName: "ABC.AppName.ViewFolder.App",
            type: "JS",
            viewData: { component: this },
        });

        i18nGlobal = new sap.ui.model.resource.ResourceModel({
            bundleUrl: "i18n/i18n.properties",
            bundleLocale: "de" 
        });

        oView.setModel(i18nGlobal, "i18n");
        sap.ui.getCore().setModel(i18nGlobal, "i18n");      

        return oView;
    }
});


ComponentContainer
从
index.html
component.js
加载文件中引用的组件描述符（manifest.json-用于声明依赖项的应用程序描述符文件）
component.js
创建根视图、默认和资源（i18n）模型

index.html

sap.ui.getCore().attachInit(function () {
    new sap.ui.core.ComponentContainer({
        name: "ABC.AppName"
    }).placeAt("content");
});

component.js

sap.ui.core.UIComponent.extend("ABC.AppName.Component", {
    metadata : {
        includes: [jQuery.device.is.phone ? "assets/css/mStyle.css" : "assets/css/dStyle.css"]
    },
    createContent: function () {
        // create root view
        var oView = sap.ui.view({
            id: "app",
            viewName: "ABC.AppName.ViewFolder.App",
            type: "JS",
            viewData: { component: this },
        });

        i18nGlobal = new sap.ui.model.resource.ResourceModel({
            bundleUrl: "i18n/i18n.properties",
            bundleLocale: "de" 
        });

        oView.setModel(i18nGlobal, "i18n");
        sap.ui.getCore().setModel(i18nGlobal, "i18n");      

        return oView;
    }
});

本主题介绍了加载文件的顺序。在大多数情况下，一旦实例化了
组件容器
，组件

就会加载其描述符（

manifest.json

）

---

关于页面为空的问题，请参阅中的其他答案。
在您的情况下，根视图缺少根控件（例如

sap.m.App

）。因此，它应该是：

在您的第一个代码片段中，您可以看到页面内容，因为已经有了

sap.m.App

该主题解释了通常按什么顺序加载哪些文件。在大多数情况下，一旦实例化了

组件容器

，组件就会加载其描述符（

manifest.json

）

---

关于页面为空的问题，请参阅中的其他答案。
在您的情况下，根视图是miss