Question

我已经按照Ionic 2的文档进行操作，无法找到推送/模态页面的方法。

我按照教程进行操作，但是当我点击按钮时没有任何反应。

官方guide没有太好地解释页面导航。

有人可以解释这个过程吗？

Answer 1

创建新页面

如果要向项目添加新页面，则需要在命令提示符下执行此操作。所以你需要在更改到项目目录（cd yourProject）之后运行以下命令

ionic g page about

CLI将在app \ pages下的新目录中为新页面生成HTML，TypeScript和SCSS文件。

将新页面添加到app.module.ts文件

将我的页面声明添加到app.modules.ts文件中。像这样的东西; -

   import {AboutPage} from '../pages/about/about';
      @NgModule({
        declarations: [
          MyApp,
          HomePage,
          AboutPage // Add New Page
        ],
        imports: [
          IonicModule.forRoot(MyApp)
        ],
        bootstrap: [IonicApp],
        entryComponents: [
          MyApp,
          HomePage,
          AboutPage //Add New Page
        ],
        providers: []
      })
  export class AppModule {}

从家中导航到关于

要从主页导航到新创建的关于页面，您需要将AboutPage类导入home.ts文件，以便在HomePage类中使用。

import {AboutPage} from '../about/about';

接下来，您需要在home.ts

上创建按钮功能

showProfilePage() {
    this.navCtrl.push(AboutPage);
}

在home.html模板中，我们可以点击添加按钮，然后导航到aboutPage.html。

 <button (click)="showProfilePage()>Go To About</button>

并向模板添加一些内容

<强>即成

接下来，在CLI中，运行ionic serve以在浏览器中查看应用程序：

ionic serve --lab

现在您可以查看Ionic 2中的导航功能。干杯!!!

Answer 2

目前，文档处于非常原始的状态。 Ionic刚刚推出测试版，rc版本有许多重大变化。在我们发言时，这些文件正在改进。

我建议Josh's blog学习一些关于Ionic的基础知识。

导航的直接链接： A Simple Guide to Navigation in Ionic 2

祝你好运！

如何导航（推送）到Ionic 2中的页面？

2 个答案: