如何在 Navigator Onsen UI 中推送或替换页面？

Question

我正在使用 cordova + Onsen 开发应用程序 UI。我想知道如何将 .popPage() 方法用于导航器内容。可能吗？我读了又读又读，但并不完全理解导航员的意思。我试图从导航器中获取所有这些内容并放入一个新页面，然后我将主页定义为我创建的这个新页面。但也没有成功。看代码：

<ons-template id="home.html" style="background:#fff;">
  <ons-navigator var="myNavigator" title="Navigator">

      <ons-page id="content-home" class="fill">
        <div class="gradient">

那么如何在导航器中对页面使用推送或替换功能？谢谢。

Answer 1

有很多方法可以管理导航，我将向您展示一个带有 ons-button 元素的示例，该元素在被触发时会将新页面推送到导航器中：

<ons-button modifier="light" ng-click="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
  Push Page
</ons-button>

您可以在 official documentation.

中找到 ons-navigator 方法的完整列表

你还需要分清3个概念：

推送页面: 将新页面添加到堆栈中。
弹出页面: returns到堆栈中的上一页，如果尚未发生推送页面操作则无法触发。
替换页面: 用指定页面替换当前页面。

您可以查看完整的导航示例 this CodePen example

编辑（回答开场白的以下评论）

我建议您不要将页面放在导航器元素内，而是使用 page 属性，该属性指定邮件加载页面。这样做，您可以根据需要多次推送同一页面。

Here是一个非常简单的例子，其代码：

<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>

<ons-template id="page1.html">
  <ons-page>
    <ons-button ng-click="myNavigator.pushPage('page1.html');">Push</ons-button>
  </ons-page>
</ons-template>

如何在 Navigator Onsen UI 中推送或替换页面？

How can I push or replace page inside a Navigator Onsen UI?

javascript

angularjs

cordova

onsen-ui