使用指令将 class 添加到宿主元素
Using a directive to add class to host element
我目前正在学习Angular 2.我知道如何使用Angular Renderer
设置一个ElementStyle
,但现在我想使用Renderer
方法:
setElementClass(renderElement: any, className: string, isAdd: boolean) : void
我的问题是如何将 CSS class 导入我的属性指令?
我必须将 CSS class 转换为 JSON 吗?
如何使用 Renderer 和 ElementRef 将 css class 添加到元素的示例。
@Directive({
selector: '[whatever]'
})
class WhateverDirective {
constructor(renderer: Renderer, el: ElementRef) {
renderer.setElementClass(el.nativeElement, 'whatever-css-class', true);
}
}
whatever-css-class在css文件中定义,在html
中引用
原OP问的是如何使用Renderer。为了完整起见,我包含了@HostBinding。
使用@HostBinding
要向元素添加 class,您可以使用 @HostBinding
import { Directive, HostBinding} from '@angular/core';
@Directive({
selector: '[myDirective]',
})
export class MyDirective {
@HostBinding('class')
elementClass = 'custom-theme';
constructor() {
}
}
将@HostBinding 与多个 classes
一起使用
为了使多个 class 使用起来更舒适,您可以使用 ES6 getter 并在返回它们之前将 class 连接在一起:
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就是Renderer2。当您有一组要应用于元素的动态 classes 时,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');
}
}
为什么要使用 Renderer 或 Renderer2 class?在指令中执行此操作的首选方法是使用 @HostBinding 装饰器。
示例:
import { HostBinding } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
@HostBinding('class')
className = 'my-directive-css-class';
}
只是另一种方法,但对我来说更容易理解。
你告诉我你的想法
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;
}
我目前正在学习Angular 2.我知道如何使用Angular Renderer
设置一个ElementStyle
,但现在我想使用Renderer
方法:
setElementClass(renderElement: any, className: string, isAdd: boolean) : void
我的问题是如何将 CSS class 导入我的属性指令? 我必须将 CSS class 转换为 JSON 吗?
如何使用 Renderer 和 ElementRef 将 css class 添加到元素的示例。
@Directive({
selector: '[whatever]'
})
class WhateverDirective {
constructor(renderer: Renderer, el: ElementRef) {
renderer.setElementClass(el.nativeElement, 'whatever-css-class', true);
}
}
whatever-css-class在css文件中定义,在html
中引用原OP问的是如何使用Renderer。为了完整起见,我包含了@HostBinding。
使用@HostBinding
要向元素添加 class,您可以使用 @HostBinding
import { Directive, HostBinding} from '@angular/core';
@Directive({
selector: '[myDirective]',
})
export class MyDirective {
@HostBinding('class')
elementClass = 'custom-theme';
constructor() {
}
}
将@HostBinding 与多个 classes
一起使用为了使多个 class 使用起来更舒适,您可以使用 ES6 getter 并在返回它们之前将 class 连接在一起:
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就是Renderer2。当您有一组要应用于元素的动态 classes 时,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');
}
}
为什么要使用 Renderer 或 Renderer2 class?在指令中执行此操作的首选方法是使用 @HostBinding 装饰器。
示例:
import { HostBinding } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
@HostBinding('class')
className = 'my-directive-css-class';
}
只是另一种方法,但对我来说更容易理解。
你告诉我你的想法
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;
}