Loading

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

posted @ 2016-05-27 22:29  Grey Zeng  阅读(7675)  评论(0编辑  收藏  举报