IONIC3+ANGULAR4 Development of custom components for hybrid apps

Here is the main record IONIC3+ANGULAR4 to develop a hybrid app when the custom component, I think the method of customizing components and ANGULAR4 should be similar, specifically in the pure ANGULAR4 custom components, temporarily no practice, the individual feel little difference, after practice will be updated again.

First, there are commands in IONIC3 to create a component directly: Ionic g component ComponentName

The components created with this command will generate a component folder and a module file in the components directory, please see: I have 3 widgets here.

and will automatically import the components you create into the module, you do not need to import modules inside, but if you need to request data in the custom components, you need to import the corresponding service

Next you can define your component in the Custom component module.

There are two key points to know about custom components:

1. Is the pass-through value between the parent component and the child component: the transfer value between the parent and child is passed through the property.

The TS file of the subcomponent module requires the use of the @input () input to allow the parent module to pass content to the Submodule

　　　　

Parent component used, passed by property

　　　　

This allows the parent component to pass the value to the child component.

2. Pass-through between child components and parent components: passing events

The subcomponent module TS needs to use the @output () output to pass values to the parent component, such as:

　　　　

Here's the This.gotohome.emit (event), which is the value to pass to the parent component, following the Click event of the template file:

　　　　

Here I passed a string "123" to the parent component, here is just an example, actually, I do not use this value in this component, you can extrapolate, according to your needs to pass the corresponding value

Here's a look at the values the parent component received, right?

　　　　

Notice here, receive the value, must add $ this symbol to receive

　　　　

I printed it out and I did receive the string "123" of the child component passed to the parent component, actually using it to see the actual requirements.

Here, the sub-component passes the value to the parent component and it ends.

If you follow the practice of the above methods of students must have doubts, will always error right, that is what I want to say, is actually very simple, you want to use your own definition of components, is not to be imported, there is this thing to use it

The next step is to import the custom components: We started by building a module for the custom component called Componentsmodule.

You need to use this componentsmodule to import into the corresponding module inside, or it will say no this component

Will it be clearer to explain?

If some small modules do not have their own independent module, it is dependent on the appmodule, to use the custom components, you need to import Componentsmodule in Appmodule

I want to record the custom component content is so much, later contact with a deeper level and then updated ~

Where there is a wrong place also hope you Daniel pointing out ~

Thank you!

IONIC3+ANGULAR4 Development of custom components for hybrid apps