در این مقاله خواهیم دید که در واقع نمای کپسوله چیست؟ چگونه کار می کند؟ انواع کپسولاسیون دید در زاویه ای موجود چیست؟ Shadow DOM چیست؟ با وجود اینکه مرورگر از shadow DOM پشتیبانی نمیکند، برنامه زاویهای از محدوده استایلسازی پشتیبانی میکند؟ ما این لیست کامل از سوالات را با جزئیات یک به یک خواهیم دید!
بنابراین برای شروع، اجازه دهید مورد استفاده را برای شما توضیح دهم، مثلاً بگوییم ما دو جزء داشتیم
- app.component (مولفه والد)
- demo.component (جزء فرزند)
ما از مؤلفه آزمایشی در داخل مؤلفه برنامه استفاده خواهیم کرد، بسیار خوب! اکنون علاوه بر این، ما یک انتخابگر h1 در هر دو مؤلفه برای نمایش عنوان داشتیم، و از آنجایی که کپسولهسازی view با استایل کار میکند، یک سبک در مؤلفه برنامه برای انتخابگر h1 ایجاد کرده بودیم. اکنون همانطور که ما کامپوننت نسخه ی نمایشی را در داخل کامپوننت برنامه می نامیم و مؤلفه نسخه ی نمایشی نیز یک انتخابگر h1 داشت. بعدش چی شد؟ آیا آن سبکی که در مؤلفه برنامه ایجاد کردیم باید به طور خودکار در انتخابگر h1 مؤلفه آزمایشی اعمال شود؟ خب، پاسخ خیر است (در واقع بستگی به نوع ViewEncapsulation دارد که استفاده می کنید)، برنامه Angular به طور پیش فرض از حالت ViewEncapuslation برای شبیه سازی استفاده می کند. حالا اون چیه؟ بنابراین این مقاله تمام پاسخ های ViewEncapsulation و نحوه کار آن با برنامه زاویه ای را دارد.
قبل از شروع کار با ViewEncapusaltion در برنامه Angular، ابتدا باید اصطلاح Shadow DOM را بدانیم.
سایه DOM
در یک کلام ساده، Shadow DOM به ما این امکان را میدهد که Scoped Styles را بدون تأثیرگذاری بر عناصر دیگر، روی عناصر اعمال کنیم.
ViewEncapsulation انواع
حالت | ارزش | شرح |
شبیه سازی شده (پیش فرض) | 0 | DOM سایه ای وجود ندارد، اما با افزودن ویژگی عنصر میزبان جدید به همه انتخابگرها، کپسوله سازی سبک را فراهم می کند. |
هیچ یک | 2 | بدون DOM سایه. |
ShadowDom | 3 | از Shadow DOM برای کپسوله کردن سبک استفاده می کند. |
خوب پس حالا بیایید همه حالت ViewEncapsulation را با جزئیات یکی یکی ببینیم.
ViewEncapsulation.هیچکدام
بنابراین همانطور که در مورد استفاده در بالا توضیح داده شد، من دو مؤلفه را مطابق شکل زیر ایجاد کردم.
app.component.html
- <h1> {{title}} </h1>
- <hr>
- <app-demo></app-demo>
app.component.ts
- import { Component,ViewEncapsulation} from '@angular/core';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- encapsulation:ViewEncapsulation.None
- })
- export class AppComponent {
- title = 'Hello from Parent';
- }
app.component.css
- h1{
- background: blue;
- text-transform: uppercase;
- text-align: center;
- }
در کامپوننت دمو، ما همچنین از یک انتخابگر h1 برای نمایش عنوان استفاده می کنیم. و از آنجایی که از حالت ViewEncapsulation به None استفاده می کنیم، همان سبک مولفه والد به مولفه فرزند اختصاص می یابد. مؤلفه دمو را در زیر پیدا کنید،
demo.component.html
<h1>{{title}}</h1>
demo.component.ts
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-demo',
- templateUrl: './demo1.component.html',
- styleUrls: ['./demo1.component.css']
- })
- export class Demo1Component implements OnInit {
- title = 'Hello from Child';
- constructor() { }
- ngOnInit() {
- }
- }
خروجی
![مشاهده کپسولاسیون در Angular](http://pezhvak24.ir/dl/10kcor/cscd/article/view-encapsulation-in-angular/Images/View Encapsulation In Angular.gif)
ViewEncapsulation.Emulated
حال اگر حالت ViewEncapsulation را به emulated تغییر دهیم که به طور پیش فرض گزینه ای است که با یک برنامه زاویه ای همراه است، خروجی متفاوت خواهد بود. اگرچه از Shadow DOM استفاده نمی کند، اما همچنان می تواند سبک را به یک عنصر خاص محدود کند. و از آنجایی که از Shadow DOM استفاده نمی کند، همچنان می تواند در مرورگری که Shadow DOM را پشتیبانی نمی کند، اجرا شود. در زیر app.component به روز شده است
- import { Component,ViewEncapsulation} from '@angular/core';
- @Component({
- selector: 'jinal',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- encapsulation:ViewEncapsulation.Emulated
- })
- export class AppComponent {
- title = 'Hello from Parent';
- }