Content Projection
About
ΠΡΠΎ ΡΠ°Π±Π»ΠΎΠ½, Π² ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΡΠ°Π²Π»ΡΡΡΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Card, ΠΈ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°.
ΠΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ.
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Content Projection Π² Angular:
Single-slot content projection: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°;
Multi-slot content projection: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ²;
Conditional content projection: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡΡ .
Π‘ΠΎΠ·Π΄Π°Π΅ΡΡΡ Content Projection ΡΠ΅ΡΠ΅Π· ΡΠ»Π΅ΠΌΠ΅Π½Ρ-placeholder <ng-content>
.
Single-slot content projection
ΠΠ°Ρ Content Projection ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ β <app-some-example>
:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Content Projection ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π² Π΄ΡΡΠ³ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅:
Multi-slot content projection
Content Projection ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ <app-some-example>
:
Angular ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ CSS-ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π·Π΄Π΅ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅:
Conditional content projection
ΠΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΊΠ°ΠΊΠΈΡ
-ΡΠΎ ΡΡΠ»ΠΎΠ²ΠΈΠΉ (ngIf
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ), ΡΠΎ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ <ng-content>
. ΠΠ»Ρ ΡΡΠΈΡ
ΡΠ΅Π»Π΅ΠΉ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ <ng-template>
ΠΈ <ng-container>
.
ΠΡΠΈΠΌΠ΅Ρ ΡΠΌΠΎΡΡΠΈ Π·Π΄Π΅ΡΡ: https://angular.io/guide/content-projection
Last updated