嵌套路由 SAPUI5

Posted 2023-02-23

【中文标题】嵌套路由 SAPUI5

【英文标题】：Nested routing SAPUI5

【发布时间】：2017-10-31 21:33:55

【问题描述】：

我对 SAPUI5 中的路由有疑问。我有一个带有两个主视图的 SplitApp 容器。第一个主视图显示设备列表。第二个主视图显示所选设备的测量点列表。数据（到目前为止）位于客户端 JSON 模型中，如下所示：

"Equipments": [
    
        "EquipmentNr": "Equipment 0000000001",
        "Messpunkte": [
                
                    "MesspunktNr": "Messpunkt 01"
                ,
                
                    "MesspunktNr": "Messpunkt 02"
                ,
                
                    "MesspunktNr": "Messpunkt 03"
                
            ]
    ,

现在详细信息页面应该能够访问在第二个主视图中选择的“Messpunkt”，但我无法通过路由传递参数。 路由到详细视图的路由配置：

            "routes": [...
            
            "pattern": "master/equiPath/detail/impttPath",
            "name": "detail",
            "target": "detail"
            
        ],
        "targets": 
            ...
            "detail": 
                "viewName": "DetailPage",
                "controlAggregation": "detailPages",
                "parent": "master"
            
        

我不知道如何在 masterpage2 的控制器中调用 navTo 方法，因为当我尝试调用它时，总是给我一个错误提示“需要该段 equiPath。”

当以这种形式调用 onNavToDetail 方法时：

onNavToDetail : function(oEvent) 
			var oItem = oEvent.getSource();
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("detail", 
				equiPath: oItem.getBindingContext("equi").getPath().substr(0)
			);

我得到了整个路径，例如“/Equipments/0/Messpunkte/0”用于段“equiPath

“使用嵌套组件”文档中的信息对我没有帮助。 感谢您的帮助。 最好的祝福

【问题讨论】：

我更改了路由配置的“路由”和“目标”部分。 “routes”部分现在包含“pattern”：“detail/impttPath”和“parent”：“master”。 “targets”部分现在只包含模式的 viewName 和 controlAggregation。这样做之后，我可以通过 URL 调用应用程序，例如/master/0/detail/0 并且它有效。错误必须在 onNavToDetail 函数中，但我不知道如何解决问题。

【参考方案1】：

我现在已经弄清楚问题出在哪里了。在 scn 的帮助下，有可能解决它。 首先我的路由配置是错误的。它必须看起来像：

"routes": [
            
            "pattern": "",
            "name": "home",
            "target": "home"
            ,
            
            "pattern": "master/equiPath",
            "name": "master",
            "target": "master"
            ,
            
            "pattern": "/master/equiPath/detail/impttPath",
            "name": "detail",
            "target": ["detail", "master"]
            
        ],
        "targets": 
            "home": 
                "viewName": "MasterPage",
                "viewLevel": 1,
                "controlAggregation": "masterPages"
            ,
            "master": 
                "viewName": "MasterPage2",
                "viewLevel": 2,
                "controlAggregation": "masterPages"
            ,
            "detail": 
                "viewName": "DetailPage",
                "viewLevel": 3,
                "controlAggregation": "detailPages"
            
        

然后我用 onNavToDetail 函数调用路由器，并在正则表达式的帮助下传递参数。 这是我使用的代码：

onNavToDetail : function(oEvent) 
        var oItem = oEvent.getSource();
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

        var sPath = oItem.getBindingContext("equi").getPath();
        console.log(sPath);
        var regExpSpath = /([0-999])/g;
        var result = sPath.match(regExpSpath);
        console.log(result[0]);
        console.log(result[1]);

        oRouter.navTo("detail", 
            equiPath: result[0],
            impttPath: result[1]
        );