Question

我目前正在学习Angular 2.我了解如何使用Angular Renderer设置ElementStyle，但现在我想使用Renderer方法：

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

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

Answer 1

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

示例：

set_page_load_timeout

Answer 2

如何使用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

中引用

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

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

3 个答案: