Onsen UI带参数的导航

IT小君   2023-05-12T01:18:19

我正在使用onsen ui、typescript和AngularJS,使用ons-sliding-menu:

  <ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.html" side="left"
                     var="menu" type="reveal" max-slide-distance="260px" swipable="true">
   </ons-sliding-menu>

   <ons-template id="menu.html">
      <ons-page modifier="menu-page">
         <ons-toolbar modifier="transparent"></ons-toolbar>
         <ons-list class="menu-list">
            <ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/page.html', {closeMenu: true})">
               主页
            </ons-list-item>
        <ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
               主页
            </ons-list-item>
 </ons-list>
      </ons-page>
   </ons-template>

这给我提供了我的菜单,一切都很好……当我导航到link/to/some/page.html时,我需要使用以下代码将一些参数推送到link/to/some/other/page.html

 $scope.myNavigator.pushPage("link/to/some/other/page.html", {param1: "bla", param2: "blabla"});

我使用以下代码读取参数:

var page = $scope.myNavigator.getCurrentPage();
console.log(page.options.param1); // 应返回“bla”

这给了我一个错误,因为param1未定义。我不确定为什么会发生这种情况,因为它是onsenUI页面中的代码。 我想这是因为我已经在我的ons-sliding-menu中定义了页面link/to/some/other/page.html....

每个页面都是这个样子的:

<ons-navigator title="Navigator" var="myNavigator">
   <div ng-controller="ControllerOfPage">
      <ons-page>
         <ons-toolbar>
            <div class="left">
               <ons-toolbar-button ng-click="menu.toggle()">
                  <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
               </ons-toolbar-button>
            </div>
            <div class="center">{{title}}</div>
         </ons-toolbar>
页面内容
      </ons-page>
   </div>
</ons-navigator>

有什么建议吗?谢谢!

点击广告,支持我们为你提供更好的服务
评论(2)
IT小君

你说每个页面看起来都像你粘贴的那个。你有几个<ons-navigator>标签吗?你真的只需要一个。

如果你这样做

$scope.navigator.pushPage('somepage.html', {param1: 'bla'});

你应该能够做到这一点

console.log($scope.navigator.getCurrentPage().options.param1);

参见笔:

http://codepen.io/argelius/pen/OPJRPe

你是否将导航器附加到控制器推送页面的控制器的父作用域中?

在你的父控制器中,你可以这样做:

ons.ready(function() {
  $scope.navigator = $window.myNavigator
});

然后在子控制器中使用该对象。

2023-05-12T01:19:12   回复
IT小君

我遇到了同样的问题,我的解决方案基本上是将两者结合在一起,像这样:

<ons-sliding-menu
        menu-page="menu.html"
        side="left"
        max-slide-distance="250px" 
        var="menu">
        <div class="main">
            <ons-navigator title="导航器" var="myNavigator" page="home.html"></ons-navigator>
        </div>          
    </ons-sliding-menu>

这样你就可以同时使用SlideMenu和Navigator模式。

2023-05-12T01:19:27   回复