Basic
ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· 3-Ρ ΡΠ°ΡΡΠ΅ΠΉ:
component-ΠΊΠ»Π°ΡΡΡ, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ
ΡΠ°Π±Π»ΠΎΠ½Ρ HTML, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ UI
CSS
html ΡΡΠ³ΠΈ (ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΏΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ)
<app-root>
β ΠΏΠ΅ΡΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ Π² ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ<app-top-bar>
,<app-product-list>
,<app-product-alerts>
β Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
Π Angular Π΅ΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΡ ΡΠ°Π½ΠΈΡΠ°ΠΉΠ·ΠΈΠ½Π³Π°:
<h3>Binding innerHTML</h3>
<p>Bound value:</p>
<p class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>Result of binding to innerHTML:</p>
<p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>
export class InnerHtmlBindingComponent {
// For example, a user/attacker-controlled value from a URL.
htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
}
ΡΡΠ³ ΡΠΊΡΠΈΠΏΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΈΠ»Π΅Π½ Angular'ΠΎΠΌ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ
DomSanitizer
ΠΡΠΈ Π°ΡΠ΄ΠΈΡΠ΅ ΠΊΠΎΠ΄Π°, ΠΈΡΠ΅ΠΌ Π²ΡΠ·ΠΎΠ²Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°. ΠΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π² Angular ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠΎΠ² Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ https://angular.io/api/platform-browser/DomSanitizer
Last updated