Content projection ანგულარში (Angular)

Content projection (კონტენტის პროექცია) არის პატერნი (კანონზომიერება) რომლის დახმარებითაც ანგულარში საშუალება გვაქვს მშობელი კომპონენტიდან შვილ კომპონენტში გავგზავნოთ რაიმე სახის კონტენტი, მაგალითად რაიმე თეგების ერთობლიობა.

ანგულარში გვაქვს 3 სახის content projection

კონტენტ პროექცია (content projection)	დეტალები
ერთ სლოტიანი კონტენტ პროექცია	ერთმაგი კონტენტ პროექციის დროს, კომპონენტი ეთანხმება მხოლოდ 1 კონტენტ პროექციას
მრავალ სლოტიანი კონტენტ პროექცია	მრავალ სლოტიანი კონტენტ პროექციის დროს კომპონენტი ეთანხმება მრავალ კონტენტ პროექციას
პირობითი კონტენტ პროექცია	პრობითი კონტენტ პროექციის დორს კომპონენტი არენდერებს კონტენტ პროექციას იმ შემთხევაში თუ პირობა სრულდება

ერთ სლოტიანი კონტენტ პროექცია

მოდი დავიწყოთ მაგალითის გაკეთება, პირველ რიგში დავაგენერიროთ კომპონენტი რომელსაც ერქმევა სახელი

app-test

ng g c test

მოცემული ბრძანება დააგენერირებს test კომპონენტს, კომპონენტის გენერაციის შემდეგ app.component.ts-ში გამოვიყენოთ სელექტორი

app.component.html

<app-test></app-test>

მოცემულ სელექტორში ისე როგორც html თეგების შემთხვევაში მაგალითისთვის ჩავწეროთ რაიმე თეგი შიგთავსით

app.component.html

<app-test>
  <p>Hello I'm projected from app component</p>
</app-test>

როგორც ნახეთ <app-test> სელექტორის გახსნისა და დახურვას შორის ჩავსვით <p> თეგი რომელიც შეიცავს ტექსტს Hello I'm projected from app component.

იმისთვის, რომ მოცემული <p> თეგი გამოჩნდეს test კომპონენტის .html ფაილში ამისთვის საჭიროა გამოვიყენოთ <ng-content></ng-content> სელექტორი თავად test.component.html-ში

test.component.html

<p>test works!</p>
<ng-content></ng-content>

კონტენტ პროექციის დროს <p> თეგი, რომელიც დავწერეთ <app-test></app-test>-ის გახსნისა და დახურვას შორის გაიგზავნება თავად test.component.html-ში და ჩაჯდება <ng-content></ng-content> სელექტორის ადგილას

მაგალითი:

<app-root _nghost-tba-c18="" ng-version="14.2.3">
    <app-test _ngcontent-tba-c18="" _nghost-tba-c17="">
        <p _ngcontent-tba-c17="">test works!</p>
        <p _ngcontent-tba-c18="">Hello, I'm projected from app component</p>
    </app-test>
</app-root>

git-ის რეპოზიტორი არსებული ნიმუშით

მრავალ სლოტიანი კონტენტ პროექცია

მრავალ სლოტიანი კონტენტ პროექციის ასაწყობად იგივე კოდს გამოვიყენებთ და ვეცდებით დავამატოთ კიდევ ერთი ng-content სელექტორი.

test.component.html-ში დავამატოთ შემდეგი ჩანაწერი

<p>test works!</p>
<ng-content></ng-content>
<p>second content projected below</p>
<ng-content select="[second]"></ng-content>

 

როგორც კოდიდან ჩანს მეორე ng-content სელექტორს აქვს ატრიბუტი select რომელშიც შენახულია [second] ტექსტი კვადრატული ფრჩხილებით, სწორედ ეს მნიშვნელობა იქნება იდენტიფიკატორი პრექცირებული კონტენტისთვის.

ახლა ვეცადოთ გამოვგზავნოთ კონტენტი app.component.html-დან

app.component.html

<app-test>
    <p>Hello, I'm projected from app component</p>
    <p second>Second projected content from app component</p>
</app-test>

თუ კოდს დააკვირდებით მეორე p თეგს აქვს second ატრიბუტი, რომელიც განსაზღვრავს თუ რომელი ng-content-ის მაგივრად უნდა ჩაჯდეს არსებული თეგი

git-ის რეპოზიტორი არსებული ნიმუშით