Angular применяет CSS к элементам ::ng-deep условно

На чтение 3 мин Опубликовано 04.10.2024

Содержание

Вопрос или проблема
HTML
Ответ или решение
Шаги для решения проблемы
Объяснение:
Итог:

Вопрос или проблема

У меня есть компонент с шаблоном

HTML

<mt-select type="multi" hideSelected="true" [ngClass]="test ? 'bgblue' : 'bgGreen'"  [readonly]="!isProdUser" appendTo="body" [options]="searchResponse" openTagsOnHover [(ngModel)]="userSelection"   minLength="2" [viewFields]="['label']" uid="label" (search)="onUserSearch($event)">
</mt-select>

введите описание изображения здесь

Сейчас у меня есть одна переменная test в файле TS, которая может принимать значение true или false. И в зависимости от значения этой переменной мне нужно применить некоторый цвет фона. Кстати, я использую препроцессор CSS SCSS.

Но мне нужно применить CSS к классу, указанному на изображении, который как бы скрыт и доступен только с помощью ::ng-deep.

Я не уверен, как применить стиль к скрытому элементу с классом lmn-select-input в зависимости от значения переменной test.

Ответ или решение

Чтобы применить CSS к элементам, доступным только через ::ng-deep, и сделать это условно, в зависимости от значения переменной test, вы можете использовать подход, предложенный ниже.

Шаги для решения проблемы

Добавьте переменную в компонент: Убедитесь, что у вас имеется логическая переменная test в вашем компоненте TypeScript, которая будет управлять условным стилем.

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

@Component({
 selector: 'app-example',
 templateUrl: './example.component.html',
 styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
 test: boolean = true; // или false, в зависимости от вашей логики
 isProdUser: boolean = true; // пример другой переменной
 userSelection: any;
 searchResponse: any;

 // Ваши остальные методы...
}

Используйте ngClass для основного элемента: Ваш HTML уже содержит условный класс (в вашем случае bgblue или bgGreen), который будет контролировать основные стили.

<mt-select type="multi" hideSelected="true" 
          [ngClass]="test ? 'bgblue' : 'bgGreen'"  
          [readonly]="!isProdUser"
          appendTo="body" 
          [options]="searchResponse" 
          openTagsOnHover 
          [(ngModel)]="userSelection"   
          minLength="2" 
          [viewFields]="['label']" 
          uid="label" 
          (search)="onUserSearch($event)">
</mt-select>

Применение стилей с использованием ::ng-deep: Для того чтобы применить стили к элементу с классом lmn-select-input, которые будут зависеть от значения test, вы можете использовать конструкции SCSS, как показано ниже:

:host {
 // Стили по умолчанию
 ::ng-deep .lmn-select-input {
   background-color: transparent; // Значение по умолчанию
 }

 // Условные стили
 &.bgblue {
   ::ng-deep .lmn-select-input {
     background-color: blue; // Синий фон, если test = true
   }
 }

 &.bgGreen {
   ::ng-deep .lmn-select-input {
     background-color: green; // Зеленый фон, если test = false
   }
 }
}

Объяснение:

Использование ::ng-deep позволяет вам нацеливаться на дочерние элементы, которые скрыты под капотом в Angular, когда используется View Encapsulation.
Условные стили определяются в зависимости от значения класса, который вы применяете с помощью ngClass.

Итог:

Теперь ваш элемент lmn-select-input будет менять цвет фона в зависимости от значения переменной test, что будет отражаться на вашем компоненте. Это решение эффективное и соответствует лучшим практикам Angular.