如何在OpenUi5 / SapUI5中更改“component0”的名称？

时间：2017-06-26 08:42:40

标签： sapui5

我刚刚进入OpenUI5，遇到了一个问题，我无法在子视图中的聚合中打开导航目标。我在Stack Overflow上找到了一个答案，说我需要专门命名父层次结构中的每个View以稳定名称 - 这大部分都有效，并且我已经能够使我的路由和目标运行。

我现在的问题是我的项目的ID前缀是__component0。我找不到任何方法来改变这部分的名称，所以我真的无法完全掌控我的身份。

我尝试在初始化之前和之后更改组件的sId，但之后应用程序无法运行。我还设置了sap.app.componentName和sap.ui5.componentId，但都没有使用。似乎component0是通过获取控制器类的类型名称来构造的，但必须将其称为Component.js。

有人知道如何更改此值，或以其他方式在代码中完全定义的DOM中派生控件ID吗？

在回复boghyon时，我不怀疑通过工厂功能设置ID是有效的，我不知道如何将ID值或工厂函数应用于我拥有的代码样式。此样式来自GitHub上的SAP启动器模板。只需在extend对象中指定id: "mycomponentname"即可。

那么我该如何重构工厂函数格式呢？

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "com/uk/ia/air/cpanel/model/models"
], function(UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("com.uk.ia.air.cpanel.Component", {
        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // set the device model
            this.setModel(models.createDeviceModel(), "device");

            // create the views based on the url/hash
            this.getRouter().initialize();
        }
    });
});

2 个答案:

答案 0 :(得分：1)

在实例化组件

时，可以手动为分配组件的ID
  • 使用sap/ui/core/Component#create API
  • 或使用new ComponentContainer(/*...*/) API

使用Component.create() 

// "Component" required from module "sap/ui/core/Component"
Component.create({
  id: "myComponent", // or this.getView().createId("myComponent") if applicable
  name: "demo"
});

使用ComponentContainer

E.g。在boot.html中的index.html中：

<head>
  <!-- ... -->
  <script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
    data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-resourceroots='{"demo": './'}'
    ...
  ></script>
</head>
<body id="content" class="sapUiBody">
  <div data-sap-ui-component
    data-id="myComponentContainer"
    data-name="demo"
    data-height="100%"
    data-settings='{"id": "myComponent"}'
  ></div>
</body>

将在init上加载的模块为sap/ui/core/ComponentSupport。加载后，它将查找具有属性data-sap-ui-component的HTML元素。该HTML元素应该为ComponentContainer提供构造函数设置，它为settings中的组件构造函数提供Component.create。

注意：此外，每个视图也必须具有ID，以便给定的组件ID包含在元素的完整ID中。否则，即使我们在组件工厂函数中定义了组件ID，组件ID也不可用。可以通过application descriptor（manifest.json）中的属性id和viewId分别设置视图ID：

Example

答案 1 :(得分：0)

如果覆盖UIComponent的构造函数，则可以更改扩展组件的自动生成的ID。使用您的代码，它应该如下所示：

return UIComponent.extend("com.uk.ia.air.cpanel.Component", {

    constructor: function(sId, mSettings) {
        UIComponent.call(this, "MyComponentId", mSettings);
    },

    metadata: {
        manifest: "json"
    },

    /**
     * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
     * @public
     * @override
     */
    init: function() {
        // call the base component's init function
        UIComponent.prototype.init.apply(this, arguments);

        // set the device model
        this.setModel(models.createDeviceModel(), "device");

        // create the views based on the url/hash
        this.getRouter().initialize();
    }
  });
});
相关问题
最新问题