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

Posted 2023-03-16

【中文标题】将 HTML 类设置为托管在 Angular 指令中

【英文标题】：Set an HTML class to host in an Angular directive

【发布时间】：2020-10-09 13:30:18

【问题描述】：

您将如何添加和设置一个可以通过参数更改的 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”参数动态更改这个类

非常感谢

【问题讨论】：

真的不知道你在这里问什么...angular.io/api/common/NgClass。您是否看过 ngClass 为样式 html 分配条件？

我不明白你的意思。是否要根据从指令内部传递给 set 属性的值添加一个类？

@Keff 没错！就像在 javascript 中一样：element.classList.add("myclass-" + set)，但来自指令内部。这样当没有指令存在时，就不需要这个类或 ngClass

我建议阅读这篇文章angular.io/guide/attribute-directives，它解释了如何访问 ElementRef，然后您可以像在 Vanilla JS 中一样使用它。

【参考方案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' 的元素。”

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

【讨论】：

哇！谢谢你，先生 ！对我来说，这样做更容易！