javascript / intermediate
Snippet
Fortgeschrittene Projektion mit ngProjectAs
Das Attribut ngProjectAs ermöglicht es, Inhalte in einen bestimmten Slot zu projizieren, selbst wenn diese Inhalte in einen Container wie ng-container eingeschlossen sind. Es stellt sicher, dass der Selektor in ng-content trotz des Wrappers korrekt matcht.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<!-- Component Template --><div class="header"><ng-content select="[card-header]"></ng-content></div><!-- Consumer Template --><ng-container ngProjectAs="[card-header]"><h3>Custom Title</h3></ng-container>
angular
Erklärung
1
select="[card-header]"
Definiert einen Einfügepunkt für jedes Element mit dem Attribut 'card-header'.
2
ngProjectAs="[card-header]"
Zwingt den ng-container, sich so zu verhalten, als hätte er das 'card-header'-Attribut für Projektionszwecke.