Установите класс HTML для размещения в директиве Angular - PullRequest
Новая
       117

Установите класс HTML для размещения в директиве Angular

1 голос
/ 19 июня 2020

Как бы вы сделали, чтобы добавить и установить класс HTML, который можно изменить с помощью параметра, с помощью директивы Angular? Допустим, у нас есть div с уже существующим классом, но без директивы: 

<div class="myClass"></div>

Теперь мы хотим прикрепить к нему директиву и один параметр: 

<div directiveName set="X" class="myClass myClass-X"></div>

Если Мне нужен 4, тогда мой класс, добавленный динамически, будет изменен следующим образом: 

<div directiveName set="4" class="myClass myClass-4"></div>

Я полностью знаю, как добавить класс с помощью @hostbinding, но я не могу найти, как изменить его динамически с помощью мой "установленный" параметр

Большое спасибо

1 Ответ

1 голос
/ 22 июня 2020

Если я правильно понял ваш вопрос, это может быть выполнено следующим образом:

Я сделал это по памяти, возможно, что-то работает не так, как ожидалось, но я думаю, вы поняли суть. 

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[directiveName]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       
       // Check if element has the 'set' directive.
       if('set' in el.nativeElement.attributes){
         // Get the "set" attribute.
         const setAttribute = el.nativeElement.getAttribute('set');

         // Add the class to the element.
         el.nativeElement.classList.add(setAttribute);
       }
    }
}

"Вы используете ElementRef в конструкторе директивы для вставки ссылки на элемент DOM хоста, элемент, к которому вы применили 'directiveName'."

Я бы посоветовал проверяя эту страницу, она довольно подробно объясняет, как работают директивы.

...