Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you how to describe the value of Angular parent components, child components through a simple code of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Zero, knowledge matting CSS selector

Before introducing parent and child components, we need to understand a concept-- selector, selector.

When we define a new component, we must have this property:

@ Component ({selector: 'app-village-edit', ① templateUrl:'. / village-edit.component.html', styleUrls: ['. / village-edit.component.scss']})

① is the selector, which tells other components that if you want to call my component, you have to use the selector of this component to call it.

In essence, it defines the HTML tag of the component, like the common

The label is the same.

What are parent and child components

Just as the relationship between parents and children is relative in reality, for its parents, a person assumes the role of a child; for his child, he assumes the role of a parent.

Parent and child components are also relative.

Suppose that when a component invokes another component through a selector (that is, a specific HTML tag) in its own HTML template. We call this component the parent component, and the called component is called the child component.

Second, the method of calling child components by parent components

Two classes are defined:

Child.component.ts, its selector selector is: 'app-child'

Parent.component.ts, its selector selector is: 'app-parent'

At this point, reference the selector of the child component in the HTMl of the parent component:

This completes the call to the subcomponent.

At this point, if the parent component is loaded via routing, you will find that the child component will also be rendered in a specific location.

Third, the parent component passes values to the child component. The child component uses the @ input decorator to receive data.

The value received by the child component from the parent component is saved to the variable of the child component.

So the only difference between a variable used to receive a value and a normal variable is to add an @ input () annotation to the regular variable.

Ordinary variables are defined as follows:

Master = 'Master'

If you use it to receive a value, just change it like this:

@ Input () master = 'Master'

In this way, the master variable defaults to the 'Master' string.

However, if the parent component passes a value to it, the variable becomes the received value.

The parent component uses square brackets [] to send data

Call subcomponents in a general way:

If the subcomponent can receive data, it can use the method of [propertyName] = value to pass the value.

For example:

You can write it this way: once the component is rendered, the master variable in the subcomponent is the value of 'hero'.

When the value of a variable in the parent component changes, the child component also changes synchronously, that is, the child component can listen for the change information of the passed value.

Upgrade: subcomponents listen for incoming data changes through the set method

In the above way, although you can listen for changes in the passed values, the limitation is that the subcomponents can only use the passed values directly.

If you want to process or filter the incoming values, you need to adjust the subcomponents a little bit.

Normally, subcomponents receive parameters by adding an @ Input decorator to the variable:

@ Input () name = 'name'

If you want to process parameters, you just need to change the variable that receives the passed value into the set method:

@ Input () get name (): string {return this._name;} set name (name: string) {/ / additional processing logic this._name = name;} private _ name =''can be added here.

At this point, _ name is an internal variable, and when the parent component passes a value to the name property, it automatically executes the set name method to assign a value to _ name and adds other processing logic.

Another upgrade: subcomponents listen for incoming data changes through ngOnChanges () lifecycle hooks

The official document says: "when you need to monitor multiple, interactive input properties, ngOnChanges () is more appropriate than the property setter method."

Normally, subcomponents receive parameters by adding an @ Input decorator to the variable:

@ Input () param1 = 'string1';@Input () param2 =' string2'

When we want to listen for changes in multiple variables and react, we can use the ngOnChanges () method:

@ Input () param1 = 'string1';@Input () param2 =' string2';ngOnChanges (changes: SimpleChanges) {① for (const propName in changes) {② / / get change information by variable name const changedProp = changes [propName]; / / get the previous value const from = JSON.stringify (changedProp.previousValue) ③ / / get the current value const to = JSON.stringify (changedProp.currentValue); ④ / / other processing procedures can be added here ⑤}}

When ① executes the ngOnChanges () method, you can use a SimpleChanges parameter to get the changes in all the parameters of the current component.

② loops to get the last value and the current value of each parameter.

③ gets the last value ④ gets the current value ⑤ adds other processes according to the business logic

Note: because ngOnChanges method calls are very frequent, which can lead to performance problems or software crashes, it is recommended to use less.

Child components transmit values to parent components. Child components eject events to parent components.

I just talked about how the child component gets the incoming variables of the parent component, how to listen for changes in the parent component, and how to handle the incoming values.

Let's move on to reverse transmission: how the parent component listens for changes in child components and reacts.

Ordinary variables are defined as follows:

Param1 = 'String1'

If you want to expose this variable to the parent component, you need to add the @ output () decorator before the variable and assign it a variable catapult:

@ Output () param1 = new EventEmitter ()

Here EventEmitter is a variable catapult, and EventEmitter needs a definite type.

But at this point, the param1 variable can no longer be assigned with the equal sign "=". If you want the parent component to listen for the change, you need to use the ejection method .emit:

This.param1.emit ("String2")

Next, go to the parent component.

The parent component listens for events ejected by the child component

The exposed variable has just been set in the child component, so how does the parent component receive it?

The regular parent component invokes child components:

If you want to listen to a variable of a subcomponent, you can use parentheses ():

Event is the event variable built-in to Angular.

Function1 the method of handling changes that we define in the parent component.

The mode of use is as follows:

Function1 (param2: boolean) {/ / this param2 is the parameter name defined by ourselves, / / it is essentially a variable param1 parameter in the subcomponent, but it does not have to be the same as the parameter name in the subcomponent / / just add the processing process here}

At this point, when the value of param1 changes, function1 is executed and an event is passed in, the essence of which is the param1 parameter defined by the child component.

The function1 method receives the parameter as a param2 and adds a process.

V. Summary

In Angular, the components that are called in HTML through the selector selector are called subcomponents.

The parent component passes values to the child component using square brackets []

Subcomponents have two ways to receive values: @ input + variable name, @ Input + set method

The child component uses EventEmitter to pass events to the parent component

The parent component receives the event using parentheses () and declares a handling method to call the

Familiar style, a picture is worth a thousand words:

VI. Postscript

Does it feel like deja vu when you first come into contact with Angular, you know that you can use square brackets [] to bind some attributes of native HTML tags, such as:

You can set my color in the component!

On the other hand, there is also a similarity in Angular that uses parentheses () to bind native HTML tags, such as:

Click me!

Are these coincidences? It's not.

We can understand it like this:

All native HTML tags in Angular become components.

The reason why many tags can bind attributes with square brackets [] and use parentheses () binding method is because Angular has extended the native HTML tags for us to have the ability to receive and send data!

In other words, we have added a lot of @ input and @ output decorators to the components within Angular so that we can easily bind these properties and methods.

These are all the contents of the article "how to describe the values of Angular parent components and child components through simple code". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.