Angular: یک فرو رفتن عمیق در کلاس‌های شبه «:host» و «:host-context»

Summarize this content to 400 words in Persian Lang
در دنیای Angular، اجزای کپسوله شده یک ویژگی اصلی هستند که توسعه دهندگان را قادر می سازد کدهای ماژولار، قابل استفاده مجدد و قابل نگهداری ایجاد کنند. در میان بسیاری از ابزارهایی که Angular برای مدیریت استایل کامپوننت ارائه می کند، :host و :host-context شبه طبقات به ویژه قدرتمند هستند. این شبه کلاس‌ها به توسعه‌دهندگان اجازه می‌دهند تا سبک‌ها را به ترتیب در عنصر میزبان یک جزء و در زمینه آن اعمال کنند. در این وبلاگ به بررسی این موضوع خواهیم پرداخت :host و :host-context شبه کلاس با مثال های عملی.

درك كردن :host

این :host شبه کلاس برای اعمال سبک ها به عنصر میزبان کامپوننت استفاده می شود. به شما امکان می دهد عنصری را که میزبان مؤلفه است، به جای هر یک از فرزندان آن، هدف قرار دهید. این به ویژه برای کپسوله کردن سبک هایی که باید مستقیماً در خود عنصر مؤلفه اعمال شوند مفید است.

مثال

بیایید با یک مثال ساده شروع کنیم. تصور کنید یک جزء به نام دارید app-card.

app-card.component.ts:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-card’,
template: `

Card content goes here…

`,
styleUrls: [‘./app-card.component.css’] })
export class CardComponent { }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

app-card.component.css:

:host {
display: block;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیوند Stackblitz

در این مثال، :host سبک ها را به خود عنصر سبک ها تضمین می کنند که app-card کامپوننت به عنوان یک عنصر بلوک با بالشتک، حاشیه و رنگ پس‌زمینه نمایش داده می‌شود.

کاوش :host-context

این :host-context شبه کلاس برای اعمال سبک ها بر اساس زمینه ای که عنصر میزبان در آن قرار می گیرد استفاده می شود. این می تواند برای اعمال سبک های مشروط بر اساس عناصر والد یا هر اجدادی در DOM بسیار مفید باشد.

مثال

سناریویی را در نظر بگیرید که در آن می خواهید app-card کامپوننت برای انطباق سبک های خود زمانی که در داخل یک عنصر والد با یک کلاس خاص قرار می گیرد، مانند .dark-theme.

app-card.component.css:

:host {
display: block;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}

:host-context(.dark-theme) {
background-color: #333;
color: #fff;
border-color: #444;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

app.component.html:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیوند Stackblitz

در این مثال، :host-context(.dark-theme) قانون سبک ها را در مورد اعمال می کند app-card جزء فقط زمانی که در یک عنصر با کلاس باشد dark-theme. این به شما اجازه می دهد تا ظاهر آن را تغییر دهید app-card بر اساس زمینه آن

مثال عملی

بیایید این مفاهیم را در یک مثال عملی ترکیب کنیم تا ببینیم چگونه با هم کار می کنند.

app.component.html:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

app.component.css:

.dark-theme {
padding: 20px;
background-color: #333;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

app-card.component.ts:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-card’,
template: `

Card content goes here…

`,
styleUrls: [‘./app-card.component.css’] })
export class CardComponent { }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

app-card.component.css:

:host {
display: block;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}

:host-context(.dark-theme) {
background-color: #333;
color: #fff;
border-color: #444;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیوند Stackblitz

در این تنظیمات:

اولین app-card جزء با سبک های پیش فرض ظاهر می شود.
دومین app-card جزء، در داخل .dark-theme ظرف، سبک های خود را مطابق با توجه به :host-context(.dark-theme) قانون.

نتیجه

این :host و :host-context شبه کلاس‌ها در Angular راه‌های قدرتمندی را برای مدیریت و اعمال سبک‌ها به اجزای شما بر اساس زمینه و عنصر میزبان ارائه می‌کنند. این ابزارها امکان استایلی انعطاف‌پذیر و آگاه از زمینه را فراهم می‌کنند که می‌تواند تجربه کاربری و قابلیت نگهداری برنامه‌های Angular شما را تا حد زیادی افزایش دهد. با تسلط بر این کلاس‌های کاذب، می‌توانید طرح‌های مؤلفه‌ای پویاتر و پاسخ‌گو ایجاد کنید که به‌طور یکپارچه با محیط‌ها و زمینه‌های مختلف سازگار می‌شوند.

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

@Component({
  selector: 'app-card',
  template: `
    

      
      
Card content goes here...
    
  `,
  styleUrls: ['./app-card.component.css']
})
export class CardComponent { }

:host {
  display: block;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

:host {
  display: block;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

:host-context(.dark-theme) {
  background-color: #333;
  color: #fff;
  border-color: #444;
}

.dark-theme {
  padding: 20px;
  background-color: #333;
}

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

@Component({
  selector: 'app-card',
  template: `
    

      
      
Card content goes here...
    
  `,
  styleUrls: ['./app-card.component.css']
})
export class CardComponent { }

:host {
  display: block;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

:host-context(.dark-theme) {
  background-color: #333;
  color: #fff;
  border-color: #444;
}