Как я могу стилизовать: хост-элемент динамически на основе параметра из @Input?

Question

Обычно я могу стилизовать саму root моего компонента, используя псевдо-стиль : host , подобный этому.

:host{ border: 1px solid gold; }

Но как я буду справляться, если указанный стиль предполагается установить динамически, основываясь на параметрах, переданных в @ Input ?

Единственный способ, которым я могу думать в данный момент, - это добавить вспомогательный DIV и стилизовать его так.

<div [ngClass]="styleMeDynamically"> ... </div>

Есть ли способ динамического применения стиля непосредственно на хосте без внедренного DIV?

Я нашел это предложение , но оно требует явного указания классы и подключение их к отдельным входам. Я хотел бы получить объект конфигурации как переданный в параметре и связать стили с помощью [ngClass] для полной гибкости в розницу.

Answer 1

Возможно @ HostBinding Декоратор может помочь вам. Это позволяет связать любой атрибут хоста, включая class и style. Например:

@Component({ ... })
export class MyComponent {
  // you can conditionally add a class to the host element
  @Input()
  @HostBinding('class.large')
  large = false;

  // it's possible to bind a style as well
  @Input()
  @HostBinding('style.border.px')
  borderWidth = 1;

  @Input()
  green = false;

  // and you can use a getter
  @HostBinding('style.border-color')
  get borderColorStyle() {
    return this.green ? 'green' : 'black';
  }
}

Поскольку angular 9 может быть даже возможно связать переменную CSS, см. Улучшенный CSS класс и стиль привязки раздел версии 9 выпуск статья .

<div [style.--main-border-color]=" '#CCC' ">
  <p style="border: 1px solid var(--main-border-color)">hi</p>
</div>

Answer 2

Что вы можете сделать, это:

Создайте пользовательскую директиву, которая будет принимать объект стиля. и внутри этой директивы вы можете получить ссылку на элемент хоста и изменить его стиль.

Вот Демо

И вот краткое объяснение.

Создайте директиву, которая будет принимать объект стиля.

import {Directive,TemplateRef,ElementRef,OnChanges,SimpleChanges,OnInit,Renderer2,DoCheck,Input} from "@angular/core";

@Directive({
  selector: "[appSetStyle]"
})
export class SetStyleDirective implements OnInit, OnChanges {
  @Input() appSetStyle: { [key: string]: any } = {};
  constructor(private elementRef: ElementRef<HTMLElement>) {}

  ngOnInit(): void {}

  ngOnChanges(changes: SimpleChanges): void {
    this.applyStyles();
  }

  applyStyles(): void {
    if (this.appSetStyle) {
      for (const key in this.appSetStyle) {
        this.elementRef.nativeElement.style[key] = this.appSetStyle[key];
      }
    }
  }
}

Используйте этот объект стиля с любым элементом html или любым другим компонентом в вашем проекте.

<app-header [appSetStyle]="dynamicStyles"></app-header>

Если вы не хотите создавать директиву, вы можете вставить ElementRef внутри самого компонента, который хотите стилизовать.

ElementRef - это то, что вам нужно, чтобы получить ссылку на хост.

Надеюсь, это поможет.