Угловой класс 2+ в директиве - PullRequest
Новая
       30

Угловой класс 2+ в директиве

0 голосов
/ 22 мая 2018

У меня есть приложение Angular 6.0.0.Необходимо динамически добавлять классы к элементам HTML.В идеале это должно быть реализовано с помощью директивы.В настоящее время у меня есть что-то вроде этого, и он работает хорошо. 

<div class="class1 prefix-{{variable}}"></div>

Я хочу сделать префикс многоразовым и пытаюсь достичь лучшего результата с помощью директивы:

html: 

<div class="class1" [appendBusinessLogicClass]="variable"></div>

appendBusinessLogicClass.directive.ts: 

export class AppendBusinessLogicClass {
readonly prefix = 'prefix';
  @HostBinding('class') class = ''; // this clears the html class1
  @Input('appendBusinessLogicClass') set appendBusinessLogicClass(variable: string) {
      this.class = this.prefix + '-' + variable;
   }
}

Но HostBinding очищает class1 в HTML-коде.Но я хотел бы добавить 'prefix-rand' в список классов.Обратите внимание, что мы не знаем variable во время компиляции.

Спасибо

1 Ответ

0 голосов
/ 22 мая 2018

То, что вы на самом деле делаете сейчас, это привязка к атрибуту класса, поэтому в основном значение будет от set до this.class, что вполне нормально.Однако оказывается, что вы на самом деле не получаете начальное значение из атрибута 'class', и это означает, что независимо от того, что вы указали для class в своем шаблоне, значение всегда будет перезаписано.Итак, в основном Angular берет на себя установку этого атрибута class.

Итак, вам нужно получить ссылку на это значение в атрибуте class.В Angular вы можете считать любой атрибут html входом для вашего компонента / директивы, единственное, что вам нужно сделать, это аннотировать его декоратором @Input.Здесь мы сохраняем значение атрибута class в defaultClassList и затем используем его для вычисления нового значения атрибута class, чтобы ваш код мог выглядеть так: 

export class AppendBusinessLogicClass {
    readonly prefix = 'prefix';

    @Input('class')
    defaultClassList;// `class` is a keyword so we're calling it defaultClassList instead

    @HostBinding('class')
    classList;// `class` is a keyword so we're calling it classList instead

    @Input('appendBusinessLogicClass') set appendBusinessLogicClass(variable: string) {
        this.classList = this.defaultClassList + " " + this.prefix + '-' + variable;
    }
}

В итоге вы получите значение атрибута, определенное в вашем шаблоне, и включите его в свой предел this.classList всякий раз, когда устанавливается значение, которое вы передаете директиве.

...