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]