Ionic2學習筆記（2）：自定義Component

作者：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