This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Front-end frame › Angular 9 series (3) subscribes to dynamic component events
View: 15693|Reply: 0

[Angular] Angular 9 series (3) subscribes to dynamic component events

[Copy link]
Posted on 6/2/2020 5:20:01 PM | | | |
Review of the previous section

Angular 9 Series (1) Dynamically Loaded Components
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 series (2) dynamic component transmission parameters
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 series (3) subscribes to dynamic component events
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Series (IV) Custom Pipe pipelines
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formats the amount currency format
https://www.itsvse.com/thread-9249-1-1.html


This article explains that if you subscribe to events for dynamic components, we know that ordinary components can be bound by () but what if you bind dynamically created events? And accept the parameters passed by the component.

Modal1Component and Modal2Component components are components that we dynamically create in the main interface.

We modify the Modal1Component component to add an input box and button. When the child component button is clicked, the value is passed back to the parent component and displayed on the parent component's interface.

Let's take a look at the renderings first, as follows:




Modal1 component (dynamically created sub-component) related code

modal1.component.html



modal1.component.ts



index component (parent component) related code

index.component.html

index.component.ts



If an error is reported:

Can't bind to 'ngModel' since it isn't a known property of 'input'

Solution:

Add the following code to your app.module:




We can now subscribe to events for dynamically created components.

If you don't take into account the value of the receiving subcomponent, you can also use HostListener to receive the subcomponent's events and then handle them accordingly according to the button button name.

Add the following code to the parent component index.component.ts:

The e here refers to $event.target, and if you know how to get the parameters of the event, you can also reply to a message from this article.



(End)




Previous:Angular 9 series (2) dynamic component transmission parameters
Next:Article publishing system who knows how to write

Related Posts
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com