Ionic2学习笔记（2）：自定义Component

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

  

    

  ------