Advanced Angular component pattern examples

Angular has now reached version 5.x. For the MVVM framework, I first came into contact with angularjs and later switched to react. Later, I changed jobs and switched to the previous angularjs due to the project technology stack. In actual work I have implemented front-end reconstruction work in several important projects of the company. During this process, I gradually realized that for the MVVM framework itself, at the usage level, it is necessary to master some common patterns, especially the components that are now very popular. development. In this way, we can seamlessly (or spend very little time and cost) convert to any MVVM framework in actual work, and use the saved time to learn new knowledge.

I have been following the blog of Angular In Depth recently. I occasionally saw this series of articles and felt that the quality was quite high, so I took the time to translate and share it with everyone, and included it every time. I added a little bit of my own humble opinion at the end of this article, hoping to achieve the effect of inspiring others. If my opinion is wrong, please feel free to comment.

Like Kent C. Dodds Advanced React Component Patterns, we'll illustrate these patterns using a relatively simple <toggle> component. <toggole>The component's responsibility is only to manage a simple Boolean state property: on. The purpose of illustration using such simple components is so that we can devote more attention to patterns that are more complex than the components themselves.

Through this series of articles, I will provide links to fully functional, runnable demo code. You just need to focus on the app folder and the toggle folder. toggleThe folder contains some reusable libraries (a series of components). Of course, this library will change as the article progresses. The app folder and specifically the app.component.html will be changed accordingly for how the library is used in different situations.

We will start with the original toggle component version. It only has an on attribute that uses the @Input() decorator. The state controlled by this attribute represents the switch state of the component itself. At the same time, it also has an on attribute that uses the @Output()The

event emitter of the decorator, this event emitter will notify the parent component when the component switch state changes.

The above is the detailed content of Advanced Angular component pattern examples. For more information, please follow other related articles on the PHP Chinese website!