时间戳

首页 > 解决方案 > 部署到 SAP Cloud Platform 时，有没有办法重用组件？

sapui5 - 部署到 SAP Cloud Platform 时，有没有办法重用组件？

问题描述

我正在尝试通过使用 ComponentContainer 重用另一个应用程序，如本博客所示：https ://blogs.sap.com/2017/10/23/demystifying-the-art-of-component-reuse-in -sapui5/

我的应用程序正在通过 SAP Web IDE Full-Stack 开发，并正在部署到 SAP Cloud Platform。通过部署到 ABAP 存储库，我已经看到了这种工作的示例，但这不是我们想要做的。

到目前为止，我已经创建了一个子应用程序和一个父应用程序，并且我正在尝试使用 ComponentContainer 从父应用程序调用子应用程序。我已经部署了子应用程序，但我不确定如何从父应用程序引用此应用程序。

这是我的 ParentApp 视图：

<mvc:View controllerName="Parent.MyParentApp.controller.View1"
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
displayBlock="true" xmlns="sap.m">
<App id="idAppControl">
    <pages>
        <Page title="{i18n>title}">
            <content>
                <Text text="Hello"/>
                <core:ComponentContainer width="100%"
                    name="MyChildApp"
                    component="MyChildApp"/>
            </content>
        </Page>
    </pages>
</App>

ParentApp 组件.js

jQuery.sap.registerModulePath("MyChildApp", "/mychildapp/");
        jQuery.sap.require("MyChildApp.Component");

ParentApp neo-app.json

{
    "path": "/mychildapp/",
    "target":{
        "type": "application",
        "name": "mychildapp"
    },
    "description": "My Child App"
}

这是我的 ChildApp 视图：

<mvc:View controllerName="Child.MyChildApp.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m">
<App id="idAppControl">
    <pages>
        <Page title="{i18n>title}">
            <content>
                <Text text="World"/>
            </content>
        </Page>
    </pages>
</App>

目前我只是收到错误：“未捕获（承诺）错误：无法从../../resources/myChildApp/model/models.js加载'myChildApp/model/models.js'：404 - ”。

我假设问题与 Component.js 和 neo-app.json 中给出的路径有关，但我不确定在云平台上工作时这些路径需要是什么。

我对 Ui5 开发还很陌生，所以不确定我想要做的事情是否可行，但是对此的任何建议/帮助将不胜感激。

谢谢

标签： sapui5sap-web-idesap-cloud-platform

解决方案

肯定是因为走错了路。为了找到正确的路径，您可以执行以下操作：

1) 打开 chrome DevTools 并打开 Network 选项卡。

我的猜测是您的子应用程序的 Component.js 将显示为红色，这意味着它没有加载。如果将鼠标悬停在父应用程序的 Component.js 文件上，您将能够看到存储父应用程序的路径。希望如果您将此路径调整为类似路径，但对于您的子应用程序，您的重用将起作用。

我的猜测是您的父应用程序组件的路径看起来像“/sap/fiori/parentApp/Component.js”。

如果是这种情况，请在父应用程序的组件中尝试以下操作：

jQuery.sap.registerModulePath("MyChildApp", "/sap/fiori/mychildapp");

推荐阅读