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
------
本文来自博客园,作者:Grey Zeng,转载请注明原文链接:https://www.cnblogs.com/greyzeng/articles/5536298.html