Question

我的功能是，当设备是横向设备时，它会向div添加一个类，当它是肖像时，该类将被删除。

这是我到目前为止实施的内容 -

<div [class.landscape]="myclass"></div>

关于代码，

protected myclass:boolean;

checkLandscape() {
  this.myclass = screen.isLandscape; 
  //I have subscribed to the orientation change which will trigger this method when the orientation changes.
}

这完美无缺。但我在其他几个地方需要这个功能。

所以我认为我要做的是创建一个指令，我将传递类名和该类名，以便在条件满足时添加到该元素。

预期功能：

<div myClassDirective="myclass"></div>

并在指令中

addMyClass() {
 // add class if it's landscape.
 // removed class if it's portrait.
}

输出：

<div class="myclass"></div>

我正在使用 Angular 2 RC 4。 我是Angular的新手，所以感谢任何帮助。

Answer 1

无法使用Angular2绑定添加/删除具有动态名称的类，但您可以使用以下代码以有棱角的方式执行此操作：

class MyClassDirective {
  constructor(private renderer:Renderer, private elRef:ElementRef) {}

  private oldClassName:String;

  @Input() set className(value:String) {
    if(oldClassName) {
      this.renderer.setElementClass(this.elRef.nativeElement, this.oldClassName, false);
    }
    if(value) {
      this.renderer.setElementClass(this.elRef.nativeElement, value, true);
    }
    this.oldClassName = value;
  }
}

如何使用Angular 2中的指令向元素添加类？

1 个答案: