Projekcje

Projekcja jest bardzo ważną koncepcją w Angular. Umożliwia programistom tworzenie komponentów do wielokrotnego użytku i sprawia, że ​​aplikacje są bardziej skalowalne i elastyczne. Aby to zilustrować, załóżmy, że mamy ChildComponent:

@Component({
    selector: 'rio-child',
    template: `
      <div>
        <h4>Child Component</h4>
        {{ childContent }}
      </div>
    `
})
export class ChildComponent {
  childContent = "Default content";
}

Co powinniśmy zrobić, jeśli chcemy zastąpić element {{childContent}} dowolnym kodem HTML dostarczanym do komponentu ChildComponent?
Jednym z kuszących pomysłów jest zdefiniowanie @Input zawierającego tekst, ale co jeśli chciałbyś dostarczyć stylizowany HTML lub inne komponenty? Próba poradzenia sobie z tym z @Inputem może szybko stać się skomplikowana. Stąd koncepcja "projekcji" treści. Czyli przekazywania treści do miejsca oznaczonego w szablonie znacznikiem ng-content.

Zmień ChildComponent, aby użyć projekcji:

app/child/child.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'tag-child',
  template: `
    <div style="border: 1px solid blue; padding: 1rem;">
        <h4>Child Component</h4>
        <ng-content></ng-content>
    </div>
  `
})
export class ChildComponent {
}

Następnie, gdy używamy ChildComponent w szablonie:

app/app.component.html

...
  <tag-child>
    <p>My <i>projected</i> content.</p>
  </tag-child>
...

Mówi to Angularowi, że dla każdego znacznika, który pojawia się między tagiem otwierającym i zamykającym <tag-child> , aby umieścić wewnątrz <ng-content></ng-content>.

Robiąc to, możemy wyświetlać tutaj inne komponenty, znaczniki itp., A ChildComponent nie musi wiedzieć o tym, co jest dostarczane, ani o to nie dbać.

Zobacz przykład [007]

Ale co, jeśli mamy wiele <ng-content></ng-content> i chcesz określić pozycję wyświetlania zawartości do określonego znacznika ng-content? Na przykład w poprzednim ChildComponent, jeśli chcemy sformatować wyświetlaną zawartość w dodatkowe częściheader i footer:

app/child-select.component.html

<div style="...">
  <h4>Child Component with Select</h4>
  <div style="...">
    <ng-content select="header"></ng-content>
  </div>
  <div style="...">
    <ng-content select="section"></ng-content>
  </div>
  <div style="...">
    <ng-content select=".class-select"></ng-content>
  </div>
  <div style="...">
    <ng-content select="footer"></ng-content>
  </div>
</div>

Następnie w szablonie możemy użyć dyrektyw, powiedzmy: <header> , aby określić położenie wyświetlanej treści nang-content za pomocą select = header:

app/app.component.html

...
<tag-child-select>
  <section>Section Content</section>
  <div class="class-select">
    div with .class-select
  </div>
  <footer>Footer Content</footer>
  <header>Header Content</header>
</tag-child-select>
...

Oprócz używania dyrektyw, programiści mogą również wybrać ng-content przez css:

<ng-content select=".class-select"></ng-content>

app/app.component.html

<div class="class-select">
  div with .class-select
</div>

Zobacz przykład [008]