angular2-directives 相关问题

我有这个按钮：我有这个按钮： <button class="btn-submit" type="button" appControlhover [defaultColor]="btnBackgroundColor" [highlightColor]="btnhoverColor" [btnhovertxtcolor]="btnColor" style="margin-top: 20px" (click)="Submit()"> Send </button> ts代码 btnBackgroundColor='#28e979'; btnhoverColor='#a6dabb'; btnhovertxtcolor='#848f90'; 自定义指令： import { Directive, OnInit, Renderer2, ElementRef, HostListener, Input, OnChanges,SimpleChanges, HostBinding } from '@angular/core'; @Directive({ selector: '[appControlhover]' }) export class ControlhoverDirective implements OnChanges { @Input() defaultColor: string; @Input() highlightColor: string; @Input() isValid: boolean = true; @HostBinding('style.backgroundColor') backgroundColor: string; @HostBinding('style.color') btnhovercolor: string; constructor() { } ngOnInit() { if (this.highlightColor != 'none') { this.backgroundColor = this.defaultColor; } else if (this.highlightColor == 'none') { this.backgroundColor = this.defaultColor; } else { this.backgroundColor = this.defaultColor; } } @HostListener('mouseenter') mouseover(eventData: Event) { if (this.highlightColor != 'none') { this.backgroundColor = this.highlightColor; this.btncolor ='#28e979'; } else if (this.highlightColor == 'none') { this.backgroundColor = this.defaultColor; } else { this.backgroundColor = this.defaultColor; } } @HostListener('mouseleave') mouseleave(eventData: Event) { if (this.highlightColor != 'none') { this.backgroundColor = this.defaultColor; } else if(this.highlightColor == 'none') { this.backgroundColor = this.defaultColor; } else { this.backgroundColor = this.defaultColor; } } } 按钮背景颜色正在更改，但我也想更改悬停时按钮上的文本颜色，否则设置为默认颜色。任何解决方案谢谢。从你的代码来看，我认为你90%接近答案。我修改的：您错过了 btnhovertxtcolor Input() 房产。当鼠标进入事件被触发时，您将颜色this.btncolor = '#28e979'设置为默认颜色。您可以将该值替换为 this.btnhovertxtcolor。对于其余部分，将按钮（字体）颜色设置为白色或您喜欢的（悬停）文本颜色。当鼠标离开事件被触发时，默认按钮（字体）颜色为黑色。因此，您可以将其设置为黑色，或者您可能需要定义自己的默认颜色。 export class ControlhoverDirective implements OnChanges { @Input() defaultColor!: string; @Input() highlightColor!: string; @Input() isValid: boolean = true; @Input() btnhovertxtcolor!: string; @HostBinding('style.backgroundColor') backgroundColor!: string; //@HostBinding('style.color') btnhovercolor!: string; @HostBinding('style.color') btncolor!: string; constructor() {} ngOnChanges(changes: SimpleChanges): void { //throw new Error('Method not implemented.'); } ngOnInit() { if (this.highlightColor != 'none') { this.backgroundColor = this.defaultColor; } else if (this.highlightColor == 'none') { this.backgroundColor = this.defaultColor; } else { this.backgroundColor = this.defaultColor; } } @HostListener('mouseenter') mouseover(eventData: Event) { if (this.highlightColor != 'none') { this.backgroundColor = this.highlightColor; //this.btncolor = '#28e979'; this.btncolor = this.btnhovertxtcolor; } else if (this.highlightColor == 'none') { this.backgroundColor = this.defaultColor; this.btncolor = "white" } else { this.backgroundColor = this.defaultColor; this.btncolor = "white" } } @HostListener('mouseleave') mouseleave(eventData: Event) { if (this.highlightColor != 'none') { this.backgroundColor = this.defaultColor; this.btncolor = 'black'; } else if (this.highlightColor == 'none') { this.backgroundColor = this.defaultColor; this.btncolor = 'black'; } else { this.backgroundColor = this.defaultColor; this.btncolor = 'black'; } } } 演示@StackBlitz 您可以使用 https://angular.dev/api/core/Renderer2 和元素引用来访问当前元素及其 DOM 渲染器（以更改样式）。 export class ControlhoverDirective implements OnChanges { @Input() btnhovertxtcolor: string; defaulttxtcolor: string = '#fff'; // your default color here constructor(private el: ElementRef, private renderer: Renderer2) { } @HostListener('mouseenter') mouseover(eventData: Event) { this._setColor(this.btnhovertxtcolor); } @HostListener('mouseleave') mouseleave(eventData: Event) { this._setColor(this.defaulttxtcolor); } private _setColor(color: string) { this.renderer.setStyle(this.el.nativeElement, 'color', color); } } 我会按照这些思路做一些事情...在我的例子中，我将一个类附加到项目，但在你的例子中，你可以附加背景颜色和文本颜色。 @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector selector: '[hoverClass]', standalone: true, }) export class HoverClassDirective { elementRef = inject(ElementRef) @Input() hoverClass!: string; @HostListener('mouseenter') onMouseEnter() { this.elementRef.nativeElement.classList.add(this.hoverClass); } @HostListener('mouseleave') onMouseLeave() { this.elementRef.nativeElement.classList.remove(this.hoverClass); } }

angular typescript angular2-directives

回答 3 投票 0

在自定义验证器指令中注入 ngControl，会导致循环依赖

我正在尝试创建自定义 Angular 2 验证器指令，它像这样注入 NgControl ： @指示（{ 选择器：'[ngModel][customValidator]'，提供者：[{提供：NG_VALIDATORS，useExist...

angular angular2-directives

回答 3 投票 0

反应式表单自定义指令不会运行 OnInit 或 *ngIf 显示隐藏输入时

在 Angular 中使用反应式形式，我创建了两个指令，一个指令通过除以 100 将值从美分转换为美元，另一个指令通过乘以 100 将美元转换为美分。这有效...

angular angular-reactive-forms angular2-directives

回答 1 投票 0

Angular 2 访问组件内的 ng-content

如何从组件类本身访问组件的“内容”？我想做这样的事情：我的文本要转换为大写怎么会...