从全屏视图导航到主从视图 SAPUI5

Question

尊敬的大师，

作为我的标题，我正在尝试创建一个包含带有一些磁贴的全屏菜单页面的应用程序，当用户按下一个时，它会导航到另一个主从页面。我的问题是我无法显示详细信息页面。我的代码如下：

manifest.json:

    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "WYTH.view",
            "controlId": "rootApp",
            "controlAggregation": "pages"
        },
        "routes": [{
            "pattern": "menu",
            "name": "menu",
            "view": "Menu",
            "targetControl": "rootApp",
            "targetAggregation": "pages"
        }, {
            "pattern": "zwm01",
            "name": "zwm01",
            "view": "ZWM01Root",
            "targetControl": "rootApp",
            "targetAggregation": "pages",
            "subroutes": [{
                "pattern": "zwm01/",
                "name": "zwm01master",
                "view": "ZWM01Master",
                "targetControl": "ZWM01",
                "targetAggregation": "masterPages",
                "subroutes": [{
                    "pattern": "zwm01/",
                    "name": "zwm01detail",
                    "view": "ZWM01Detail",
                    "targetControl": "ZWM01",
                    "targetAggregation": "detailPages"
                }]
            }]
        }]
    },

我设法用这个来显示菜单视图。当我点击 1 个图块时，它会触发以下功能：

navZWM01: function() {
        this.getRouter().navTo("zwm01", false); 
    },

结果，它不显示详细信息页面，而是母版页面

有什么建议吗？

最好的问候

Answer 1

1) 要启动全屏应用程序，我使用如下路由。这里我在 rootView 的帮助下加载 App Container

routes : [
  {
    pattern : "",
    name : "_full1",
    targetAggregation: "pages",
    target : "monitorOperations"
   }
 ],

"targets": {
     "monitorOperations" : {
                "viewName": "Full1", 
                "viewLevel": 1, 
                "viewId": "_Full1Id", 
                "controlId": "idAppControl",
                "controlAggregation": "pages" 
       },
}

2) 使用如下路由加载主从模板 iam。这里我在 rootView 的帮助下加载 splitApp 容器

routes : [
             { 
               "pattern": "", 
                "name": "master", 
                "target": ["detail", "master"] 
             }, 
             { 
               "pattern": "detail/{detailId}", 
                "name": "detail",
                "target": ["master", "detail"] 
            } 
           ],
"targets": { 
           "master": {
                        "viewName": "Master", 
                        "viewLevel": 1, 
                         "viewId": "master", 
                         "controlId": "idAppControl",
                        "controlAggregation": "masterPages" 
                       }, 
            "detail": {
                     "viewName": "Detail", 
                      "viewId": "detail",
                      "controlId": "idAppControl",
                      "controlAggregation": "detailPages", 
                      "viewLevel": 2 
                    }, 
          "notFound": {
                 "viewName": "NotFound", 
                  "viewId": "notFound", 
                  "viewLevel": 3 
            } 
        }

将两者结合起来，首先加载全屏（应用程序容器），当用户单击按钮或选择全屏中的任何 Tile/Item 时，然后加载第二个页面（带有主页面和详细信息的拆分容器）

routing: {
    config : {
            routerClass : MyRouter,
            viewType : "XML",
            viewPath : "org.edu.ui.views",
            targetAggregation : "detailPages",
            clearTarget : false
             },
         routes : [
                {
                    pattern : "",
                     name : "_full1",
                    arget   : "monitorOperations"
                },
                {
                    pattern : "manageOperations",
                    name : "_full2",
                    target  : ["SplitAppContainer","detail", "master"]
                },
                {  
                                "pattern": "detail/{product}",  
                                "name": "detail",
                                "target": ["master", "detail"]  
                         },
                {  
                                "pattern": "manageOperations1",  
                                "name": "master",  
                                "target": ["detail", "master"]  
                            }
                ],

    "targets": {
            "monitorOperations" : {
                    "viewName": "Full1",  
                                         "viewLevel": 1,  
                                         "viewId": "_Full1Id",  
                                         "controlId": "idAppControl",
                                         "controlAggregation": "pages" 
                    },
            "SplitAppContainer" : {
                    "viewId": "_Full2Id",  
                    "viewName": "Full2",  
                                        "viewLevel": 1,  
                                        "controlId": "idAppControl",
                                        "controlAggregation": "pages"
                    },
            "master": {
                    "parent" : "SplitAppContainer",
                                        "viewName": "Master1",  
                                        "viewLevel": 2,  
                                        "viewId": "master",  
                                        "controlId": "idSplitContainerControl",
                                        "controlAggregation": "masterPages"  
                                       },  
                    "detail": {
                                     "parent" : "SplitAppContainer",
                                     "viewName": "Detail",  
                                     "viewId": "detail",
                                     "controlId": "idSplitContainerControl",
                                     "controlAggregation": "detailPages", 
                                     "viewLevel": 3  
                                },  
                    "notFound": {
                                 "viewName": "NotFound",  
                                 "viewId": "notFound",  
                                 "viewLevel": 3  
                             } 
                      } 
      }

我在我的实现中使用了它，感谢 Saran Kumar，希望这会有所帮助。

Answer 2

尝试创建两条路线和拖曳目标，一条用于Master，一条用于Details。每个目标都绑定到一个视图，如目标的 viewName 属性中定义的那样。设置两个路由的 target 属性以导航到两个目标。

"routes": [
    {
      "pattern": "",
      "name": "master",
      "target": ["object", "master"]
    },
    {
      "pattern": "Objects/{objectId}",
      "name": "object",
      "target": ["master", "object"]
    }
  ],
  "targets": {
    "master": {
      "viewName": "Master",
      "viewLevel": 1,
      "viewId": "master",
      "controlAggregation": "masterPages"
    },
    "object": {
      "viewName": "Detail",
      "viewId": "detail",
      "viewLevel": 2
    }

然后，当您从磁贴单击导航时，两个目标都匹配。如果将参数传递给详细信息视图，请捕获 Router 对象的“routeMatched”或“patternMatched”事件，并使用bindElement() 更改“详细信息”视图上下文

这个demokit里面很详细：Master-Detail Navigation