來扯點ionic3[1] 建立一個新頁面

目錄

建立一個頁面組件
簡單瞭解裝飾器
在AppModule中註冊頁面
第一次展示
使用獨立的模板文件

一個APP中最基本的元素可謂是頁面了，因此當咱們建立了一個新的APP後，就應該瞭解一下如何建立一個新頁面。

建立一個頁面組件

在 ionic 中，頁面是以組件(component)的形式存在的，每一個頁面都是一個獨立的組件。咱們如今須要建一個名爲test的頁面，咱們如今pages文件夾下新建一個文件夾，並建立一以 .ts 結尾的同名文件。

在 test.ts 中添加第一部分代碼

import { Component } from '@angular/core'

@Component({
    selector: 'page-test',
    template: `<h1>Hello World!</h1>`
})
export class TestPage {}

在這幾行代碼中，咱們只作了一件事情，就是聲明瞭TestPage頁面類：

• export關鍵詞：將類暴露出去，以便其它的文件能夠import到它。
• 類的命名：在ionic3中，頁面類採用頁面名+Page的命名方式，首字母大寫，如HomePage, ContactPage等。

簡單瞭解裝飾器

咱們發如今類的聲明語句以前，有一串看似不明因此的代碼。它就是Component裝飾器，裝飾器(decorator)在ES6中是以@開頭的特殊的函數，能夠動態地給類添加一些功能，在這裏Component裝飾器就會根據傳入的配置對象，爲頁面類賦予建立頁面視圖的功能。

而這裏Component並不是憑空出現的，而是文件的第一行，經過import語句將其導入進來的。

import { Component } from '@angular/core'

@angular/core是一個npm的模塊，定義了angular的核心功能，你能夠在node_modules目錄下找到它。

咱們在裝飾器中配置了兩個東西，selector和template：

• selector：爲頁面指定選擇器的名稱，能夠在css爲組件使用特定的樣式，在ionic 3.x中規範爲 page- 開頭，爲了避免形成混亂，須要保持每一個頁面selector的惟一性。

<h1>Hello World!</h1>

• template : 模板的字符串，裏面其實就是html代碼，它是最終展現在頁面上的內容；這兒的字符串是用 ` 符號包裹的（就是esc下面那個），一來你能夠自由地換行，二來不會有引號轉義的問題，固然在ES6中它有更重要的做用（參見末尾資料中的「模板字符串」）

在AppModule中註冊頁面

APPModule位於 src/app 目錄下的 app.module.ts中，APPModule是整個應用的根模塊，它是一個大工廠，負責把全部咱們要用的東西組裝在一塊兒。咱們要把新添加的頁面註冊到根模塊當中，這隻須要簡單的兩步：
1.引入TestPage頁面類，咱們在文件的開頭部分，加上相關的語句，若是你是個對代碼整潔度有要求的人，你確定是會加在已有的幾個頁面引入語句附近的：

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { TestPage } from '../pages/test/test';

主意from後面的地址是不須要加 .ts 擴展名的，若是在編輯器或IDE中安裝了自動填充路徑的插件，很容易誤加後綴。

2.將TestPage分別加入declarations和entryComponents數組中：

@NgModule({
  declarations: [
    ...
    TabsPage,
    TestPage
  ],
  ...
  entryComponents: [
    ...
    TabsPage,
    TestPage
  ],
 ...

以說明TestPage是APP中須要用到的組件，並且是一個動態組件。

展示

咱們尚不知道如何從已有的頁面中把test頁打開，咱們用一個笨辦法來觀察咱們剛剛建立的頁面，打開 pages/tabs/tabs.ts ，導入TestPage，並把 tab1Root 替換掉，讓應用的首屏變成test頁面。

...
import { TestPage } from '../test/test';
...
export class TabsPage {

  tab1Root = TestPage;
  ...

運行serve命令，打開本地服務器，獲得了這樣的界面

使用獨立的模板文件

咱們獲得的顯然不是一個典型的APP頁面，如今咱們再test文件夾下新建test.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Test
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <h1>Hello World!</h1>
</ion-content>

這一段HTML代碼就是一個標準的ionic頁面結構，不少標籤都是ionic定製的，頁面分爲頭部(ion-header)和主體(ionic-content)兩個部分，頭部包含了導航欄(ion-navbar)及標題(ion-title)，而主體部分，就是咱們自定義的內容。

回到test.ts，把剛纔裝飾器嵌入的模板代碼

template: `<h1>Hello World!</h1>`

替換爲引入獨立模板文件的代碼

templateUrl:'./test.html'

注意這裏包裹路徑的符號變成了單引號。

在發生改動以後，瀏覽器會自動刷新頁面，此時咱們看到了如今的頁面：

總結

至此咱們完成了一個頁面的建立，看似步驟有點多，可是熟練了之後這是一個很是快速的過程，總的說來一共就三步：

1.建立組件文件 .ts
2.在AppModule中註冊組件
3.建立模板文件 .html

第二步和第三步其實是能夠順序互換的。

下一章將會介紹頁面之間的跳轉，以及頁面棧原理。

參考資料

1.修飾器（ECMAScript6 入門）
2.模板字符串（ECMAScript6 入門）