在自定义指令 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 事件上更新