معرفی Encapsulation (کپسوله‌ سازی) در انگولار

در طی تمام مباحثی که در فصل گذشته ارائه شد با مفاهیمی چون styleUrl و templateUrl آشنا شدید که یک قالب و استایل مشخص را برای کامپوننت شما در نظر می‌گیرد. حال در این بخش می‌خواهیم به توضیح مفهوم کپسوله‌ سازی (Encapsulation) در فریم‌ورک قدرتمند انگولار  بپردازیم. با ما همراه باشید.

کپسوله‌ سازی یا Encapsulation چیست؟

کپسوله‌سازی به فر‌آیندی گفته می‌شود که طی آن مجموعه‌ی کدهای یک پروژه به صورت دسته‌ بندی شده و در یک ساختار مشخص در دسترس باشند.

کپسوله‌ سازی در انگولار چیست؟

در انگولار کپسوله سازی به معنای جداسازی فایل‌های HTML, CSS و همچنین View کامپوننت موردنظر از سایر کامپوننت‌هاست. تا به اینجای کار نحوه‌ی کپسوله‌ کردن قالب را در فایل‌هایی با پسوند component.html و component.css را یاد گرفتید.

دستور Encapsulation در انگولار

کپسوله‌ سازی را می‌توان با تعریف یک ویژگی در مفسر یا دکوراتور ایجاد یا حذف کرد. حذف کپسوله سازی به معنای حذف صفت‌ها (attributes) از کد‌های HTML و در نهایت ساختار قالب می‌باشد. برای روشن‌تر شدن این موضوع مثال قبل را با یکدیگر مرور می‌کنیم.

در حالت عادی اگر بخواهیم کپسو‌له‌ سازی‌ ای صورت نگیرد کافیست فایل app.component.css را باز کرده و در نهایت استایل موردنظر خود را به آن اضافه کنیم و در این حالت کپسوله‌ سازی‌ ای برای کامپوننت‌های فرزند servers و server صورت نپذیرفته و در نهایت استایل آنها با استایل app.component.css برابر می‌باشد.

اما اگر بخواهیم یک کپسوله‌ سازی نرمال انجام دهیم باید فایل server.component.css را باز کرده و کدهای css خود را درون آن قرار دهیم و به همین سادگی کل کامپوننت را منحصر به استایل و قالب خودش کنیم.

حال یک دستور در مفسر Component@ وجود دارد که به شما این امکان را می‌دهد تا نحوه‌ی encapsulation صفحه view خود را به صورت دستی تنظیم و مشخص کنید. برای اینکار کافیست مثلا کامپوننت server.component.ts را باز کرده و در نهایت دستورهای زیر را به آن اضافه کنید:

@component{
  ...
  encapsulation: ViewEncapsulation.None
  encapsulation: ViewEncapsulation.Native
  encapsulation: ViewEncapsulation.Emulated
}

همانطور که ملاحظه می‌کنید ۳ حالت مختلف برای کپسوله‌سازی توسط مفسر برای ویژگی Encapsulation در اختیار ما قرار گرفته است. قبل از توضیح این سه حالت توجه داشته باشید که حتما باید متد ViewEncapsulation را در بالای صفحه با دستور زیر فراخوانی کنید:

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

حال به توضیح هر یک از روش‌های کپسوله‌سازی می‌پردازیم:

ViewEncapsulation.None: در این حالت هیچگونه استایل و قالبی به صورت اختصاصی برای این کامپوننت درنظر گرفته نمی‌شود.

ViewEncapsulation.Native: در این حالت استایل‌ها به صورت ذاتی از مرورگر شما گرفته می‌شوند و سایر استایل‌هایی که در فایل component.css نوشته خواهد شد در بستر استایل‌های توکار مرورگر رخ می‌دهند.

ViewEncapsulation.Emulated: این حالت به صورت پیشفرض و خودکار فعال بوده و نیازی به نوشتن آن نیست. در این حالت استایل‌ها و قالب‌ها دقیقا از فایل‌های component.css فراخوانی شده و سپس استایل توکار مرورگر را روی آنها لحاظ می‌کند. یعنی تقدم و اولویت با استایل‌هایی است که توسط شما نوشته می‌شوند.

بهترین حالت برای استفاده از این ساختار ViewEncapsulation.Emulated است که به صورت خودکار در تمام کامپوننت‌ها فعال می‌باشد. زیرا در حال حاضر مرورگرهای بسیار کمی هستند که قالبیت native دارند.

بسیار عالی! در این بخش اطلاعاتی در ارتباط با کپسوله‌سازی ظاهر و قالب انگولار خدمت شما عزیزان ارائه کردیم. در بخش بعدی مباحث مربوط به قالب HTML یک کامپوننت را به صورت کامل در اختیار شما عزیزان قرار می‌دهیم.

توجه: دوستان عزیز آموزش ویدیویی انگولار 6 از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید.