Web开发学习笔记:Ionic4开发自定义组件

1.在项目中创建一个自定义模块

ionic g module moduleName

创建完成后会生成一个文件夹,文件夹中有个一个ts文件

Web开发学习笔记:Ionic4开发自定义组件_第1张图片

2.使用命令创建一个自定义组件(组件创建在上一步创建的模块文件夹下)

ionic g component componentName

创建之后的文件夹结构

Web开发学习笔记:Ionic4开发自定义组件_第2张图片

3.在自定义模块的module.ts文件中引入创建的组件

Web开发学习笔记:Ionic4开发自定义组件_第3张图片

 

4.在需要使用自定义组件的地方引用自定义模块(引用模块之后就可以直接使用模块中的组件,上一步中已经将自定义组件包含在自定义模块中)

Web开发学习笔记:Ionic4开发自定义组件_第4张图片

5.在HTML页面中使用自定义组件(自定义的组件好像都需要app-开头)

Web开发学习笔记:Ionic4开发自定义组件_第5张图片

效果图:

Web开发学习笔记:Ionic4开发自定义组件_第6张图片

 

未完待续................

参考了:http://www.ionic.wang/article-index-id-148.html

你可能感兴趣的:(Web开发学习笔记)