在指令 Angular 2 上查询元素类答案

【问题标题】：Query Element Class on Directive Angular 2在指令 Angular 2 上查询元素类
【发布时间】：2016-01-12 13:08:33
【问题描述】：

我是 Angular 2 的新手，我想编写一个属性指令来查询搜索“class1”类的元素，如果找到，则应将“class1”替换为“class2”。

应该是这样的：

import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
  selector: '[my-directive]'
})
export class MyDirective {
  constructor(el: ElementRef, renderer: Renderer) {
    //Pseudo-code
    if (el.containsClass('class1')) {
      el.removeClass('class1');
      el.addClass('class2');
    } 
  }
}

找不到任何相关文档，所以决定写这个问题。

【问题讨论】：

标签： class angular

【解决方案1】：

您最好的选择是编写一个查询.class1 的指令。然后host 类class2 然后使用Renderer 删除原来的类。这是一个例子

@Directive({
  selector : '.class1',
  host : {
    'class' : 'class2' // The element will host 'class2'
  }
})
class MyDirective {
  constructor(renderer: Renderer, elementRef: ElementRef) {

    // The third argument is false which will remove the class
    renderer.setElementClass(elementRef.nativeElement, 'class1', false);
  }
}

更新

通过将 class1 评估为 null 可以更简单。这样我们就可以摆脱 Renderer 和 ElementRef。

@Directive({
  selector : '.class1',
  host : {
    '[class.class2]' : 'true', // Set to 'true' to add the class
    '[class.class1]' : 'null'  // Set to 'null' to remove the class
  }
})
class MyDirective {}

注意将类/属性/属性评估为 null 会将其移除。

这是一个plnkr，示例正在运行。

【讨论】：

你能详细解释一下你为什么主持这个课程吗？
这只是一种实现方式。就我个人而言，我宁愿使用组件来做这些事情。您也可以使用 Renderer 添加它。
@MarcosJ.CKichel 我已经用更简单的方式更新了我的答案。

【解决方案2】：

你可以试试这个：

@Directive({
  selector: '[test]',
  export class MytDirective {
    constructor(el: ElementRef, renderer: Renderer) {
      var classNameStr = el.nativeElement.className;
      if (/someclass/.test(classNameStr)) {
        renderer.setElementClass(el.nativeElement, 'someclass', false);
        renderer.setElementClass(el.nativeElement, 'otherclass', true);
      }
    }
  }
})

事实上，nativeElement 属性对应于指令应用的 DOM 元素。请参阅此链接：https://developer.mozilla.org/en-US/docs/Web/API/Element。

Renderer 类的 API 如下所述：https://angular.io/docs/ts/latest/api/core/Renderer-class.html。

希望对你有帮助蒂埃里

【讨论】：