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

Posted

技术标签:

【中文标题】在自定义指令 angular 4 中实现 onclick()【英文标题】:implement onclick() in custom directive angular 4 【发布时间】: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>

【问题讨论】:

【参考方案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 将监听组件元素上的事件(例如 )

以上是关于在自定义指令 angular 4 中实现 onclick()的主要内容,如果未能解决你的问题,请参考以下文章

在自定义指令的范围绑定中使用符号“@”、“&”、“=”和“>”:AngularJS

如何使用 ControlValueAccessor Angular 在自定义输入中使用指令

使用 Angular 4 在 datatables.net 中实现自定义搜索

在 Angular2 ngModel 值未在自定义指令的 onBlur 事件上更新

如何在自定义 Spring 存储库中实现自定义方法? [复制]

如何在自定义 UIButton 中实现 .isHighlighted 动画?