如何瀏覽（推送）到Ionic 2中的頁面？

Question

我已經按照Ionic 2的文檔，找不到推動/模式化頁面的方式。

我按照教程，但是當我點擊按鈕什麼也沒有發生。

官方guide沒有解釋頁面導航太好。

有人可以解釋過程嗎？

Answer 1

創建新頁面

如果要添加新的頁面，你需要做的是在命令提示符項目。所以，你需要下面的命令來運行改變到你的項目目錄之後（CD yourProject）

ionic g page about 

的CLI將產生下的應用程序\頁面的新目錄下的HTML，打字稿，併爲您的新的一頁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> 

，並添加一些內容，以大約模板

即成

然後，在命令行，運行離子服務在瀏覽器中查看應用程序：

ionic serve --lab 

現在你可以檢查Ionic 2中的導航功能。乾杯！

Answer 2

此文檔處於非常原始的狀態。 Ionic剛剛推出beta版，並且在rc版本中有很多突破性更改。我們發言時正在修改文件。

我會推薦Josh's blog來學習一些Ionic的基礎知識。

和直接鏈接到導航： A Simple Guide to Navigation in Ionic 2

祝你好運！