使用指令将类添加到host元素

Question

我目前正在学习Angular 2.我了解如何使用Angular Renderer设置一个ElementStyle,但现在我想使用该Renderer方法:

setElementClass(renderElement: any, className: string, isAdd: boolean) : void

我的问题是如何将CSS类导入到我的属性指令中？我必须将我的CSS类转换为JSON吗？

Answer 1

原OP询问如何使用渲染器.为了完整性,我已经包含了@HostBinding.

使用@HostBinding

要向元素添加类,可以使用@HostBinding

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('class')
  elementClass = 'custom-theme';

  constructor() {
  }
}

将@HostBinding与多个类一起使用

为了使多个类更易于使用,您可以使用ES6 getter并在返回之前将它们连接在一起:

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {
  protected _elementClass: string[] = [];

  @Input('class')
  @HostBinding('class')
  get elementClass(): string {
      return this._elementClass.join(' ');
  }
  set(val: string) {
      this._elementClass = val.split(' ');
  }

  constructor() {
      this._elementClass.push('custom-theme');
      this._elementClass.push('another-class');
  }
}

使用渲染器

更低级别的API是Render2.当您想要将一组动态类应用于元素时,Renderer2非常有用.

例:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  constructor(private renderer: Renderer2, hostElement: ElementRef) {
    renderer.addClass(hostElement.nativeElement, 'custom-theme');
  }
}

Answer 2

为什么要使用Renderer或Renderer2类？在指令中执行此操作的首选方法是使用@HostBinding装饰器.

例:

import { HostBinding } from '@angular/core';

@Directive({
    selector: '[myDirective]'
})
export class MyDirective {

    @HostBinding('class')
    className = 'my-directive-css-class';
}

Answer 3

只是另一种方法，但对我来说更容易理解。

你让我知道你的想法

import { Directive, Input} from '@angular/core';

@Directive({
  selector: '[whatever]',
  host: {
    // These are like ngClass class condition values
    '[class.custom-class1]': 'true', // Default class for example
    '[class.custom-class2]': 'foo === "expectedValue"', // Predicate1
    '[class.custom-class3]': 'foo !== "expectedValue"', // Predicate2
  },
})
export class WhateverDirective {
  @Input() foo: string;
}

Answer 4

如何使用Renderer和ElementRef将css类添加到元素的示例.

@Directive({
   selector: '[whatever]'
})
class WhateverDirective {
   constructor(renderer: Renderer, el: ElementRef) {
       renderer.setElementClass(el.nativeElement, 'whatever-css-class', true);
   }
}

whatever-css-class在css文件中定义,在html中引用