Question

我相信其他人会立即发现这一点，但这个问题令我感到困惑。

我有一个使用App的简单测试应用程序。

在这个应用程序中，我有两个htmlview页面：page1和page2。

我已经设置了一个配置为在这两个htmlview之间切换的路由器。

在每个htmlview上，我都有一个按钮，用户可以通过router.navTo（route）将我带到另一个htmlview。

问题在于，虽然这些按钮成功地导航我到了其他的＆＃39; htmlview，这是通过URL的更改来确认的，其他视图不会替换第一个视图。

index.html是＆＃39;标准＆＃39;：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-resourceroots='{
        "navtest": "./"
    }'> 
 </script>
 <script>
sap.ui.getCore().attachInit(function() {
   new sap.m.Shell("shell",{
       app : new sap.ui.core.ComponentContainer({
          height : "100%",
          name : "navtest"
       })
   }).placeAt("content"); });
</script>
</head>
<body class="sapUiBody" >
<div id="content"></div>
</body>
</html>

我已按如下方式配置路由器：

jQuery.sap.declare("navtest.Component");
jQuery.sap.require("navtest.Router");
sap.ui.core.UIComponent.extend("navtest.Component", {
metadata : {
  name : "navtest",
  version : "1.0",
  includes : [],
  dependencies : {
     libs : [ "sap.m", "sap.ui.layout" ],
     components : []
  },
  rootView : "navtest.view.app",
  config : {

 },
  routing : {
         config : {
            routerClass : navtest.Router,
            viewType : "XML",
            viewPath : "navtest.view",
            targetAggregation : "pages",
            clearTarget : true
         },
         routes : [ {
            pattern : "",
            name : "page0",
            view : "page1",
            viewType : "HTML",
            targetAggregation : "pages",
            targetControl : "idAppControl"
         },{
            pattern : "1",
            name : "page1",
            view : "page1",
            viewType : "HTML",
            targetAggregation : "pages",
            targetControl : "idAppControl"
         }, {
            pattern : "2",
            name : "page2",
            view : "page2",
            viewType : "HTML",
            targetAggregation : "pages",
            targetControl : "idAppControl"
         }]
  }},init : function() {
   sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
   var rootPath = jQuery.sap.getModulePath("navtest");
   this.getRouter().initialize();
  },
  });

每个HTML视图如下：

<template data-controller-name="navtest.view.page1">
<div data-sap-ui-type="sap.m.Page" data-title="page 1">
    <div data-sap-ui-aggregation="content">
    this is page 1
    </div>
<div data-sap-ui-type="sap.m.Button" data-text="showPage2" 
    data-tap="showPage2"></div>
</div>
</template>

 sap.ui.controller("navtest.view.page1", {
showPage2 : function(oItem) {
    sap.ui.core.UIComponent.getRouterFor(this).navTo("page2");
},  
onInit: function() {
            sap.ui.core.UIComponent.getRouterFor(this)
   .attachRouteMatched(this.onRouteMatched, this);
},
onRouteMatched : function(oEvent) {
}   
});

主要的app.xml就是：

<?xml version="1.0" encoding="UTF-8"?><mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m" >
<App id="idAppControl" >
<Page id="navtest.page1"></Page><Page id="navtest.page2"></Page>
</App>
 </mvc:View>

我知道当问题显得微不足道时，我会觉得自己像个白痴，但我可以忍受： - ）

Answer 1

添加到您的navtest.Component.init

this.routeHandler = new sap.m.routing.RouteMatchedHandler(this.getRouter())

之前

this.getRouter().initialize();

您可以在官方＆＃34;最佳做法＆＃34;中找到有关自定义路由的更多信息。指南 https://openui5.hana.ondemand.com/#docs/guide/688f36bd758e4ce2b4e682eef4dc794e.html

如何使用路由器在HTML视图之间切换

1 个答案: