在自定义指令 angular 4 中实现 onclick()答案

【问题标题】：implement onclick() in custom directive angular 4在自定义指令 angular 4 中实现 onclick()
【发布时间】：2018-03-31 22:20:06
【问题描述】：

我有一个简单的按钮和一个指令，我想访问按钮的样式，在指令中添加带有 onclick() 函数的 MarginLeft，它不起作用，但从构造函数设置 css 有效，如何在单击时使用它？请帮忙：

指令：

    import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[Bluecolored]'
})
export class BluecoloredDirective {

  constructor(private element:ElementRef) {
    console.log(element);
   element.nativeElement.style.color="blue";
   }
clicked(){
  this.element.nativeElement.style.marginLeft=20;
  console.log("marzi"+this.element.nativeElement.style.marginLeft);
}
}

这是模板：

<p Bluecolored>
  new-fom works!
</p>
<h1 Bluecolored>Blue Colored</h1>
<button   (click)="clicked()" Bluecolored>Click</button>

【问题讨论】：

标签： javascript css angular typescript angularjs-directive

【解决方案1】：

您可以在指令中使用 HostListener：

@HostListener('click') onClick(){
    this.element.nativeElement.style.marginLeft=20;
    console.log("marzi"+this.element.nativeElement.style.marginLeft);
}

这样你也可以通过按钮远程(click)="clicked()"

我将我的命名为 onClick，但您也可以将其命名为 clicked

【讨论】：

但是我想从 dom 中选择一个特定的元素说一个按钮，我该怎么做？
HostListener 只监听指令绑定到的元素上的事件。
我编辑我之前的评论太晚了，所以，如果你想通过点击一个按钮来改变多个元素，你可能最好使用组件和一个控制元素样式的变量（或一个切换类的变量）。
我们可以使用组件中的@HostListener() 还是只能通过指令访问？？
是的，组件扩展了指令，因此指令的所有可能性在组件上也是可能的，组件上的 HostListener 将监听组件元素上的事件（例如 )