Exemples de modèles de composants angulaires avancés

Angular a atteint la version 5. J'ai mis en œuvre un travail de reconstruction front-end dans plusieurs projets importants de l'entreprise Au cours de ce processus, j'ai progressivement réalisé que pour le framework MVVM lui-même, au niveau de l'utilisation, il est nécessaire d'en maîtriser certains. modèles communs, en particulier les composants qui sont désormais très populaires en matière de développement. De cette façon, nous pouvons facilement (ou dépenser très peu de temps et d'argent) nous convertir vers n'importe quel framework MVVM dans le travail réel et utiliser le temps gagné pour acquérir de nouvelles connaissances.

J'ai suivi le blog de Angular In Depth récemment. J'ai vu occasionnellement cette série d'articles et j'ai senti que la qualité était assez élevée, j'ai donc pris le temps de la traduire et de la partager avec tout le monde, et j'ai ajouté un un peu après chaque article. Mon humble opinion, j'espère qu'elle pourra inspirer les autres. Si mon opinion est fausse, n'hésitez pas à commenter.

Comme dans les modèles de composants React avancés de Kent C. Dodds, nous illustrerons ces modèles à l'aide d'un composant <toggle> relativement simple. La responsabilité du composant <toggole> est simplement de gérer une simple propriété d'état booléen : on. Le but de l’illustration utilisant des composants aussi simples est de permettre que nous puissions accorder plus d’attention aux modèles plus complexes que les composants eux-mêmes.

Grâce à cette série d'articles, je fournirai des liens vers du code de démonstration entièrement fonctionnel et exécutable. Il vous suffit de vous concentrer sur le dossier app et le dossier toggle. Le dossier toggle contient quelques bibliothèques réutilisables (une série de composants). Bien entendu, cette bibliothèque changera au fur et à mesure de l'avancement de l'article. Le dossier app, et plus particulièrement app.component.html, sera modifié en conséquence en fonction de la manière dont la bibliothèque est utilisée dans différentes situations.

Nous commencerons par la version toggle originale du composant. Il n'a qu'un attribut @Input() qui utilise le décorateur on. L'état contrôlé par cet attribut représente l'état de commutation du composant lui-même. Il possède également un émetteur d'événement @Output() qui utilise le décorateur toggle . l'émetteur d'événements avertira le composant parent lorsque l'état du commutateur du composant change.

Recommandations associées :

Comment introduire des styles externes dans les composants angulaires

Méthode de deux boîtes modales contextuelles angulaires

Tutoriel AngularJS et exemple d'analyse de code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!