Angular - 5.13-Projeter du contenu dans des composants avec ng-content

Nous apprenons donc beaucoup de choses tout au long de cette section. Nous avons appris comment faire circuler des données, comment accéder aux éléments de notre DOM et comment utiliser des références locales. Maintenant, notre application est beaucoup plus dynamique. Nous avons beaucoup plus d'outils pour interagir entre les différentes pièces que nous avons dans notre application.

Maintenant, il y a une autre façon de faire circuler des données. La dernière façon pour l'instant dans notre composant server element ici. Actuellement, nous vérifions si nous avons un type de serveur ou un type de serveur de modèle, n'est-ce pas ? Mais parfois, vous avez un code HTML complexe comme celui-ci que vous voulez passer dans un composant depuis l'extérieur. Alors imaginez que vous ne voulez pas mettre cela à l'intérieur du composant ici. Je l'ai plutôt coupé dans le composant d'application. Vous voulez ajouter ceci ici entre l'ouverture et la fermeture de votre propre composant. Et là, nous devrions simplement avoir à remplacer "élément" par "server element". Et nous devrions nous attendre à ce que cela fonctionne, n'est-ce pas?

Donc, si nous enregistrons cela et le laissons se recharger et nous ajoutons un nouveau serveur, nous n'obtenons pas d'erreur. Mais le contenu n'est également pas là et c'est le comportement par défaut. Tout ce que vous placez entre l'ouverture et la fermeture de votre propre composant est perdu par défaut. Il est simplement supprimé du DOM. Angular ne s'en occupera pas, mais vous pouvez changer cela. Il y a une directive spéciale et c'est une directive même si cela ressemble à un composant mais il n'a pas son propre modèle.

Une directive spéciale que vous pouvez ajouter dans le modèle de ces composants serverElement. Ici, à l'endroit où je veux rendre le contenu, je peux ajouter NG content en ouverture et en fermeture. Encore une fois, c'est toujours une directive utilisant simplement ce sélecteur d'élément, et cela sert de crochet que vous pouvez placer dans votre composant pour marquer l'endroit où Angular doit ajouter tout contenu qu'il trouve entre l'ouverture et la fermeture de la balise ici.

Donc, avec ce contenu dans ce cas avec cette petite addition, vous devriez voir que une fois que vous l'avez enregistré et laissé se recharger, si nous ajoutons ceci et nous cliquons sur ajouter un serveur, vous verrez maintenant que le contenu est de retour. Il ressemble exactement à ce qu'il était avant, mais techniquement quelque chose de totalement différent fonctionne ou se produit ici. Maintenant, nous ajoutons ceci via le crochet NG content. Nous l'ajoutons entre les balises d'ouverture et de fermeture et donc il sera projeté dans votre composant, donc dans votre composant serverElement. Une fonctionnalité intéressante, surtout si vous pensez à construire des widgets réutilisables comme un widget d'onglets où chaque onglet aura probablement un contenu qui vient d'une autre source et que vous ne voulez pas passer par une liaison de propriété, qui serait toujours une alternative.

Mais si c'est un code HTML plus complexe, nouvelle phrase : la liaison de propriété n'est pas la meilleure solution car Angular échappera les textes HTML pour éviter les attaques de script entre sites. Et vous pourriez contourner cela d'une certaine manière. Mais NG content, c'est la façon dont vous voulez l'afficher, et c'est un excellent outil à votre disposition.