ng-content

شاید برای شما سوال بوجود آمده باشد که مابین تگ های کامپوننتی که میسازیم چه چیز باید بنویسیم؟ شاید هم تست کرده باشید ولی هیچ خروجی به شما نشان داده نشده باشد.

ابزاری هست به نام ng-content که انگولار در اختیار ما قرار میدهد.محتویاتی که میخواهیم از parent انتقال بدهیم را در فرم نمایش دهد.

هرجایی که خواستیم محتویات نمایش دهد از تگng-content استفاده میکنیم.این تگ کمک میکند تا هر اطلاعاتی که ازparent داخل تگ child نوشتیم،در مکانی که تگ ng-content را نوشتیم قرار داده شود.

کلاس مادر:

<child-component>

<p>اطلاعات داخل فرم فرزند نوشته میشود. </p>

</child-component>

کلاس فرزند:

<i> متن ارسالی از کلاس مادر:</i>
<ng-content></ng-content>

ng-content یک ویژگی داره به نام select که در حقیقت همون selector هایی هست که در css هم با آنها کار میکنیم. مثل نقطه که برای انتخاب کلاس و هشتک که برای انتخاب آیدی استفاده میکنیم. از تمامی سلکتور های css در اینجا هم میتوان استفاده کرد.

کلاس مادر:

<child-component>

<p #one class=” first” >پیغام نخست </p>

<p #two class=” second” > پیغام نخست </p>

</child-component>

کلاس فرزند:

<i> متن ارسالی از کلاس مادر:</i>
مکان نمایش پیغام اول:
<ng-content select=”.first”></ng-content>
مکان نمایش پیغام دوم:
<ng-content select=”.second”></ng-content>

برای دسترسی به اطلاعات داخل ng-content باید از Localrefrence استفاده کنیم. داخل کامپوننت child از دکوریتور ContentChild استفاده میکنیم.

دقت شود برای دسترسی به متغییر داخل خود کامپوننت مادر از ViewChild استفاده میشود ولی اینجا چون داخل کامپوننت فرزند میخواهیم دسترسی داشته باشیم از ContentChild استفاده میکنیم و اسمی که داخل کامپوننت مادر تعریف کردیم را به ان ارسال کنیم.

برای خواندن اطلاعات شبیه viewChild عمل میکنیم.

@ContentChild("one", { static: true }) one: ElementRef;

چرخه زندگی ContentChild که بنا به نیاز از آن استفاده کنیم:

  • AfterContentInit

زمانی که متغییر از نوع ContentChild را initialize میکند یعنی در حالت اولیه و تنها یکبار رخ میدهد.

  • AfterContentChecked

پس از AfterContentInit برای اولین بار اتفاق میافتد و سپس هر موقع تغییرات به مقدار content میدهیم صدا زده میشود.