路由器navTo后未呈现SAPUI5 / OpenUI5视图

Question

我正在创建具有简单路由的SAPUI5示例应用程序（SAPUI5 / OpenUI5 v.1.22）。

我的主要问题，我试图理解，为什么URL模式更改和目标视图控制器的onInit被触发，但没有任何反应（onAfterRendering没有被解雇），我只能在页面重新加载后转到另一个页面。

路由设置。初始化路由器的Component.js按以下方式构造：

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {

    return UIComponent.extend("sge.apps.app.Component", {

        metadata:{
            name : "Sample App",
            version : "1.0",
            includes : [],
            dependencies : {
                libs : ["sap.m", "sap.ui.layout"],
                components : []
            },

            rootView: "sge.apps.app.view.App",

            config: {
                resourceBundle: "i18n/i18n.properties"
            },

            routing : {
                config : {
                    routerClass : sap.ui.core.routing.Router,
                    viewType : "XML",
                    viewPath : "sge.apps.app.view",
                    targetControl: "app",
                    targetAggregation: "pages",
                    transition: "slide",
                    clearTarget : false,
                    bypassed: {
                        target: "notFound"
                    }
                },
                routes: [{
                    pattern: "",
                    name: "appHome",
                    view: "Home"
                },{
                    pattern : ":all*:",
                    name : "catchallDetail",
                    view : "NotFound",
                    transition : "show"
                },{
                    pattern: "notFound",
                    name: "appNotFound",
                    view: "NotFound",
                    transition : "show"
                }]
            }
        },

        init : function() {
            UIComponent.prototype.init.apply(this, arguments);

            var mConfig = this.getMetadata().getConfig();

            // always use absolute paths relative to our own component
            // (relative paths will fail if running in the Fiori Launchpad)
            var rootPath = jQuery.sap.getModulePath("sge.apps.app");

            // set i18n model
            var i18nModel = new sap.ui.model.resource.ResourceModel({
                bundleUrl : [rootPath, mConfig.resourceBundle].join("/")
            });
            this.setModel(i18nModel, "i18n");

            // set device model
            var deviceModel = new sap.ui.model.json.JSONModel({
                isTouch : sap.ui.Device.support.touch,
                isNoTouch : !sap.ui.Device.support.touch,
                isPhone : sap.ui.Device.system.phone,
                isNoPhone : !sap.ui.Device.system.phone,
                listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
                listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
            });
            deviceModel.setDefaultBindingMode("OneWay");
            this.setModel(deviceModel, "device");

            this.getRouter().initialize();
        }
    });
});

我有Home.view.xml的Home.controller.js，我尝试导航到另一个视图，按下事件onDisplayNotFound的按钮：

sap.ui.define([
    "sge/apps/app/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sge.apps.app.controller.Home", {
        onDisplayNotFound : function (oEvent) {
            this.getRouter().navTo("appNotFound");
        }
    });
});

BaseController.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/routing/History"
], function (Controller, History) {
    "use strict";

    return Controller.extend("sge.apps.app.controller.BaseController", {        
        getRouter: function () {
            return sap.ui.core.UIComponent.getRouterFor(this);
        },
        onNavBack: function (oEvent) {
            var oHistory, sPreviousHash;

            oHistory = History.getInstance();
            sPreviousHash = oHistory.getPreviousHash();

            if(sPreviousHash !== undefined) {
                window.history.go(-1);
            } else {
                this.getRouter().navTo("appHome", {}, true /*no history*/);
            }
        }
    });
});

目标视图NotFound.view.xml的NotFound.controller.js：

sap.ui.define([
    "sge/apps/app/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sge.apps.app.controller.NotFound", {
        onInit: function () {
            console.log("onInit NotFound.view.xml");
        },
        onAfterRendering: function () {
            console.log("onAfterRendering NotFound.view.xml");
        }
    });
});

Answer 1

我遇到了同样的问题，我通过在路由配置中添加此行来解决：

    "routerClass" : "sap.m.routing.Router",

它完美地导航了。

"routing": {
        "config": {
            "routerClass" : "sap.m.routing.Router", 
            "viewPath": "es.seidor.view",
            "controlId": "App",
            "async" : "true",
            "clearTarget" : "true"
        }

Answer 2

sap.ui.define是UI5 v1.30的一个功能

将您正在使用的版本更新为1.30.x或删除sap.ui.define代码并将其替换为与早期版本一起使用的代码。

pre-sap.ui.define代码如下所示：

jQuery.sap.require("sap.m.Button");
//use jQuery.sap.require to require any controls or other files
sap.ui.controller("my.controller", {

    onInit: function(){
        //your code here
        //doing something with sap.m.Button, won't work without the require
        //var oBtn = new sap.m.Button("myBtn", {text: "Click me"});
    },

    onAfterRendering: function(){
        //more code
    }
});

试试吧。

Answer 3

解决方案很简单，只需使用TDG最佳实践的某些部分：

创建文件MyRouter.js

sap.ui.define([
    "sap/ui/core/routing/Router",
    "sap/m/routing/RouteMatchedHandler"
], function (Router, RouteMatchedHandler) {
    "use strict";

    return Router.extend("sge.apps.notespese.MyRouter", {
        constructor : function() {
            sap.ui.core.routing.Router.apply(this, arguments);
            this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this);
        },
        destroy : function() {
            sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments);
            this._oRouteMatchedHandler.destroy();
        }
    });
});

将它注入Component.js，如下所示：

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sge/apps/notespese/MyRouter"
], function (UIComponent, MyRouter) {
    "use strict";

    return UIComponent.extend("sge.apps.notespese.Component", {
    ...

在组件元数据部分替换

routing : {
                config : {
                    routerClass : sap.ui.core.routing.Router,

同

routing : {
                config : {
                    routerClass : sge.apps.notespese.MyRouter,

希望不要忘记其他这个问题相关的事情。