ionic3+angular4开发混合app 之自定义组件 _混合app

厌伴老儒烹瓠叶，强随举子踏槐花。这篇文章主要讲述ionic3+angular4开发混合app 之自定义组件相关的知识，希望能为你提供帮助。
这里主要是记录ionic3+angular4开发混合app时自定义组件，我想自定义组件的方法和angular4应该类似，具体在纯angular4中自定义组件，暂时没有实践，个人觉得差别不大，之后实践了会再次更新。
首先，在ionic3中有命令可以直接创建一个组件：ionic g component componentName
使用这个命令创建的组件会在components目录下生成一个组件文件夹和一个module文件，具体目录，请看截图：我这里是有3个小组件

文章图片

并且会把你创建的组件自动import到module里面，你无需在在里面导入模块了，不过如果你需要在自定义组件里面请求数据的话，就需要import相应的服务了
接下来你就可以在自定义组件模块里面定义你的组件了
自定义组件要掌握的知识点主要有两点：
1.是父组件到子组件之间的传值：父到子之间的传值方式是通过属性来传值
子组件模块的ts文件里面需要使用@Input()输入，使父模块往子模块传递内容

文章图片

父组件使用，通过属性的方式传递

文章图片

这样父组件到子组件就可以传值了。
2.子组件到父组件之间的传值方式：通过事件来传递
子组件模块ts需要使用@OutPut()输出向父组件传值，具体用法如下图：

文章图片

这里的this.gotohome.emit(event); 里面的event就是指要传递给父组件的值，下面看模板文件的点击事件：

文章图片

这里我给父组件传递了一个字符串“123”，这里只是举个例子，实际，我在在这个组件中没有用到这个值，你们可以举一反三，根据你们的需求来传相应的值
下面看父组件接收到的值对不对？

文章图片

这里注意一下，接收值，一定要加上$这个符号才能接收到

文章图片

我这边打印出来，确实接收到了子组件传给父组件的字符串“123”，实际怎么使用看实际的需求了
到这里，子组件传值给父组件就结束了
如果跟着以上方法实践的同学肯定有疑问了，会一直报错对不对，那就是我接下来要说的事情了，其实很简单，你要用你自己定义的组件，是不是得先导入，有这个东西才能使用吧
接下来就导入自定义的组件：我们一开始给自定义的组件建了一个module，叫做componentsModule
你要使用的时候需要将这个componentsModule导入到相应的module里面去，不然会报错说没有这个组件

文章图片

用上图来解释会不会更明了一些呢？
【ionic3+angular4开发混合app 之自定义组件】如果一些小模块没有自己独立的module，它本身就是依赖于appModule的话，要使用自定义组件，则需要在appModule里面导入componentsModule即可
我要记录的自定组件内容就这么多了，以后接触到更深的层次再更新了~
哪里有写错的地方还望各位大牛指点指点~
谢谢！