Class 指令2上的查询元素类

我是Angular 2的新手，我想写一个属性指令来查询搜索'class1'类的元素，如果找到了，它应该用'class2'替换'class1'

应该是这样的：

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');
    } 
  }
}

找不到任何相关文档，因此决定写此问题。

您可以尝试以下方法：

@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元素。请参阅此链接：

此处描述了

呈现程序

类的API:

希望它能帮助你，

---

Thierry

您最好的选择是编写一个查询

.class1

的指令。然后

host

class

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，这可能更简单。这样我们就可以摆脱渲染器和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会将其删除

---

下面是一个例子。

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