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