1

您将如何添加和设置可以通过参数更改的 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 添加一个类，但是我找不到如何使用我的“set”参数动态更改这个类

非常感谢你

4

1 回答 1

1

如果我正确理解了您的问题，则可以按如下方式完成：

我是凭记忆做到的，也许有些事情没有按预期工作，但我想你明白了。

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' 的元素。”

我建议查看此页面，它非常详细地解释了指令的工作原理。

于 2020-06-22T11:27:32.183 回答