我有一个自定义指令,应该可以根据其他条件添加/删除类。
即
// imports
@Directive({
selector: '[customDirective]'
})
export class CustomDirective {
constructor(service: SomService) {
// code to add class
if (service.someCondition()) {
// code to remove class
}
}
}
答案 0 :(得分:21)
如果您不想使用ngClass
指令(提示:您可以将函数传递给[ngClass]="myClasses()"
,如果它会在您的模板中内联杂乱),您可以使用Renderer2
要添加一个或多个类:
export class CustomDirective {
constructor(private renderer: Renderer2,
private elementRef: ElementRef,
service: SomService) {
}
addClass(className: string, element: any) {
this.renderer.addClass(element, className);
// or use the host element directly
// this.renderer.addClass(this.elementRef.nativeElement, className);
}
removeClass(className: string, element: any) {
this.renderer.removeClass(element, className);
}
}
答案 1 :(得分:2)
当您在Angular中使用指令时,您可能希望使用@HostBinding
并绑定到class.your-class
以便能够基于谓词添加/删除您的类。您无需在Renderer2
中进行DI即可有效地添加/删除类。
例如,在使用Bootstrap和Reactive Forms时,如果您想指示有效或无效的表单字段,则可以执行以下操作:
import { Directive, Self, HostBinding, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[appCheckFormFieldValidity]'
})
export class CheckFormFieldValidity{
@Input() public class: string;
constructor(
@Self() private ngControl: NgControl
) { }
@HostBinding('class.is-valid')
public get isValid(): boolean {
return this.valid;
}
@HostBinding('class.is-invalid')
public get isInvalid(): boolean {
return this.invalid;
}
public get valid(): boolean {
return this.ngControl.valid &&
(this.ngControl.dirty || this.ngControl.touched);
}
public get invalid(): boolean {
return !this.ngControl.pending &&
!this.ngControl.valid &&
(this.ngControl.touched || this.ngControl.dirty);
}
}
这不是严格的示例,但是它说明了@HostBinding
的用法,我在StackBlitz中创建了示例
答案 2 :(得分:1)
打开和关闭下拉菜单的指令示例
import { Directive, ElementRef, Renderer2, HostListener, HostBinding } from '@angular/core';
@Directive({
selector: '[appDropDown]',
})
export class DropsownDirective{
@HostBinding('class.open') isopen = false;
@HostListener('mouseenter') onMouseEnter(){
this.isopen = !this.isopen;
}
@HostListener('mouseleave') onMouseLeave(){
this.isopen = !this.isopen;
}
}
组件添加指令appDropDown
<div class="col-xs-12">
<div class="btn-group" appDropDown>
<button class="btn btn-primary dropdown-toggle">
Manage Movie <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">To watching List</a></li>
<li><a href="#">Edit Movie</a></li>
<li><a href="#">Delete Movie</a></li>
</ul>
</div>
确保将新指令包括在 @NgModule声明
答案 3 :(得分:0)
export class CustomDirective {
classname:string = "magenta";
constructor(private renderer: Renderer2,
private elementRef: ElementRef,
service: SomService) {
}
addClass(className: string, element: any) {
// make sure you declare classname in your main style.css
this.renderer.addClass(this.elementRef.nativeElement, className);
}
removeClass(className: string, element: any) {
this.renderer.removeClass(this.elementRef.nativeElement,className);
}
}