sapui5/openui5查看路由器後不呈現navTo

Question

我用簡單路由創建sapui5示例應用（sapui5/openui5版本是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.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

解決方法很簡單，只需使用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 2

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 3

我有同樣的問題，我在路由的配置加入這一行解決：

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

而且它一直完美導航。

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