Question

我是Angular 2的新手，我想编写一个属性指令来查询搜索＆＃39; class1＆＃39;如果找到它，那么它应该替换'class1＆＃39;与＆＃39; class2＆＃39;。

应该是这样的：

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

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

Answer 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，示例正常运行。

Answer 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。

希望它可以帮到你，亨利

指令Angular 2上的查询元素类

2 个答案: