如何在 angular 2 中向按钮添加属性并在全局级别访问它

Question

我想给按钮添加一个属性，如下所示

   <button type="button" eventlistener (click)="toggleButton()">Toggle</button>

我想在全局级别为单击事件添加更多逻辑，无论何时通过添加简单属性添加按钮或任何元素，我都应该能够收听它们。看完 angular 2 material 中的代码后，我有这个疑问，如下所示：

<button md-button>Click me!</button>

他们使用 md-button 属性为按钮添加了一些样式。以同样的方式，我想为我的自定义属性添加我的自定义功能。请提出建议。

Answer 1

@Directive({
    selector: '[eventlistener]'
})
export class EventListener {
    @HostListener('click')
    onClick() {
        alert('You clicked me');
    }
}

然后只需将 eventlistener 添加到任何内容，然后单击它，您就会看到警报。

此外，将此指令的 class 添加到 root 模块

中的 declarations 数组

注意一切都是从@angular/core

导入的

Answer 2

为此创建一个指令。检查指令以在鼠标悬停时更改背景颜色。

指令class

import { Directive,ElementRef, Renderer2, OnInit, HostListener, HostBinding,
Input } from '@angular/core';

@Directive({
  selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective implements OnInit {

@Input() defaultColor: string = 'transparent';
@Input() highlightColor: string = 'yellow';

@HostBinding('style.backgroundColor') backgroudColor: string;

constructor(private elmentRef: ElementRef, private renderer: Renderer2) { }

 ngOnInit() {
this.backgroudColor = this.defaultColor;
}
@HostListener('mouseenter') onmouseover(eventData: Event) {
//this.renderer.setStyle(this.elmentRef.nativeElement, 'background-color', 'red');
this.backgroudColor = this.highlightColor;
}

@HostListener('mouseleave') onmouseleave(eventData: Event) {
//this.renderer.setStyle(this.elmentRef.nativeElement, 'background-color', 'transparent');
this.backgroudColor = this.defaultColor;
 }
}

模板

<p appBetterHighlight [defaultColor] = "'green'" [highlightColor] = "'yellow'" >Highlight better paragraph</p>

如何在 angular 2 中向按钮添加属性并在全局级别访问它

How to add attribute to button and access it at the global level in angular 2

angular2-directives

angular