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

Question

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

我试图理解的主要问题是，为什么 URL 模式发生变化并且目标视图控制器的 onInit 被触发，但是什么也没发生（onAfterRendering 不是已解雇），并且只有在页面重新加载后我才能转到另一个页面。

路由设置。 Compontent.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.controller.js 的 Home.view.xml 从那里我尝试导航到另一个视图，通过按下带有事件 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.controller.js NotFound.view.xml:

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

sap.ui.define 是 UI5 v1.30

的一个特性

将您正在使用的版本更新为 1。30.x 或删除 sap.ui.define 代码并将其替换为适用于早期版本的代码。

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 2

解决方法很简单，只需要使用部分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,

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

Answer 3

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

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

而且导航效果很好。

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

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

SAPUI5/OpenUI5 view not rendered after router navTo

router

rendering

view

sapui5