将 HTML class 设置为在 Angular 指令中托管

Set an HTML class to host in an Angular directive

您将如何添加和设置可以使用参数和 Angular 指令更改的 HTML class? 假设我们有一个 div 和一个已经存在的 class,但没有指令:

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

现在,我们想给它附加一个指令,以及一个参数:

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

如果我需要 4,那么我动态添加的 class 会像这样更改:

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

我完全知道如何使用@hostbinding 添加 class,但我找不到如何使用我的“设置”参数动态更改它

非常感谢

如果我没有正确理解你的问题,可以按如下方式完成:

我是凭记忆做的,也许有些地方没有按预期工作,但我想你已经明白了要点。

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

我建议检查 this 页面,它非常详细地解释了指令的工作原理。