Ionic2學習筆記（2）：自定義Component http://www.cnblogs.com/greyzeng/p/5536298.html

作者：Grey

原文位址： http://www.cnblogs.com/greyzeng/p/5536298.html

上一篇提到，Ionic2提供了很多Component供使用，例如：

<ion-title></ion-title>

<ion-icon></ion-icon>

等

我們可以建立自定義Component，

如：

<new-component></new-component>

我們用這個Component來表示:

<h1>HelloWorld</h1>

<p> Hello, this is my Component</p>

• 進入項目目錄：

  指令：cd MyFirstApp

• 建立一個component，命名為NewComponent

  指令：ionic g component NewComponent

  

  目錄中新增了如下内容：

  

• 編輯NewComponent裡面的内容，找到../app/components/new-component/new-component.html, 修改其中的内容為：

  

• 找到../app/components/new-component/new-component.ts, 修改其中的内容為：

  

• 在HomePage中增加這個Component，找到../app/pages/home/home.ts, 在其中增加：

  

• 接下來，我們就可以在HomePage中使用這個Component了，找到../app/pages/home/home.html, 增加Component

  

• 修改啟動頁面為HomePage，預設即為HomePage，在../app/app.ts中，

  

• 啟動項目：

  指令：ionic serve -l

  

  ------

  上一篇：Ionic2學習筆記（1）：建立一個頁面

  下一篇：Ionic2學習筆記（3）：Pipe