我怎样才能获得当前路线？

Question

无论如何我可以获得当前的路线名称吗？有一个getRoute功能,但我必须自己传递路由名称.如果有办法从控制器中的路由器对象获取所有路由的名称,它对我有帮助.例如:

this.getRouter().getRoutes()

有一个功能,getViews但我找不到相同的路线.

Answer 1

并不像看起来那么简单,尽管它仍然可能没有任何第三方解决方案.

我们假设路由(在manifest.json中)是:

"routes": [
            {
                "pattern": "",
                "name": "Main",
                "view": "main",
                "targetAggregation": "pages"
            },
            {
                "pattern": "create",
                "name": "Create",
                "view": "myView",
                "targetAggregation": "pages"
            },
            {
                "pattern": "edit/{id}",
                "name": "Edit",
                "view": "myView",
                "targetAggregation": "pages"
            },
            {
                "pattern": "view/{id}",
                "name": "View",
                "view": "myView",
                "targetAggregation": "pages"
            }
        ]

因此,在这种情况下,您希望获得当前名称:创建,编辑或查看.

注1:在我的情况下,有一个视图/控制器("myView")用于处理三种不同类型的显示器,但它没关系 - 你也可以有单独的视图/控制器.(详见附注2).

所以这是为了检索这些路径名称你必须做的事情:

第1步: 在manifest.json中创建一个全局模型

"models": {
        "applicationModel": {
            "type": "sap.ui.model.json.JSONModel",
            "settings": {},
        },
    }

第2步:

在给定的控制器(myView)中,使用内置onInit方法中的路由器attachRouteMatched方法:

onInit: function(){
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                oRouter.attachRouteMatched(this.routeMatched, this);
}

注意2:如果您有一个多页面应用程序,请在根控制器或component.js中设置事件处理程序.无论您在哪个子页面,这两个都会被加载.

第3步:

在同一个控制器中,主要是直接在onInit方法下,创建回调方法(在我的例子中,它被称为routeMatched):

routeMatched: function(oEvent){
            var oParameters = oEvent.getParameters(),
            var sRouteName = oParameters.name; // Yay! Our route name!
            var oModel = this.getView().getModel("applicationModel");
            oModel.setProperty("/routeName", sRouteName);
}

第4步

现在,只要您可以访问模型,只需将其命名为新属性:routeName.

this.getView().getModel("applicationModel").getProperty("/routeName");

Answer 2

从 1.75 版开始

从 UI5 v1.75 开始，检索当前路线变得更加容易。

getCurrentRoute: function(router = this.getOwnerComponent().getRouter()) {
  const currentHash = router.getHashChanger().getHash();
  const { name } = router.getRouteInfoByHash(currentHash); // since 1.75
  return router.getRoute(name);
},

API参考： sap.ui.core.routing.Router#getRouteInfoByHash

在 1.46.1 和 1.74 之间

1. 在 Component.js 中：

    return UIComponent.extend("...", {
      metadata: {
        manifest: "json",
        properties: {
          "currentRouteName": {} // default type == "string"
        }
      },
   
      init: function() {
        UIComponent.prototype.init.apply(this, arguments);
        this.getRouter().attachBeforeRouteMatched(this.onBeforeRouteMatched, this);
        // ...
      },
   
      onBeforeRouteMatched: function(event) { // beforeRouteMatched available since 1.46.1
        this.setCurrentRouteName(event.getParameter("name"));
      },
   
      getCurrentRoute: function() {
        return this.getRouter().getRoute(this.getCurrentRouteName());
      },
   
      // ...
    });
   

2. 控制器中的任何位置（甚至在onInit）：

    const currentRoute = this.getOwnerComponent().getCurrentRoute();
   

示例：https : //embed.plnkr.co/wp6yes?show=Component.js,preview

Answer 3

我只是扩展了默认路由器： https://gist.github.com/ffleige/1f080e5c0769085569188302b2e12040

要使用它，请替换manifest.json中的默认路由器类

"routing": {
  "config": {
    "routerClass": "my.app.MyRouter",

像这样在控制器中使用扩展路由器

// get id of current route
var routeId = UIComponent.getRouterFor(this).getCurrentRouteId();
// get current route object 
var route = UIComponent.getRouterFor(this).getCurrentRoute();

该方案不会暴力访问私有成员，并使用openui5 1.44进行测试。