如何使用@Directive处理点击事件？
@Directive是Angular框架中的一个装饰器，用于创建自定义指令。通过@Directive处理点击事件的步骤如下：
- 导入必要的模块和装饰器：import { Directive, ElementRef, HostListener } from '@angular/core';
- 使用@Directive装饰器创建自定义指令：@Directive({ selector: '[myClickDirective]' }) export class MyClickDirective { constructor(private el: ElementRef) { } }
- 在自定义指令中定义处理点击事件的方法：@Directive({ selector: '[myClickDirective]' }) export class MyClickDirective { constructor(private el: ElementRef) { }
@HostListener('click') onClick() { // 处理点击事件的逻辑 }}
- 在需要使用该指令的元素上添加指令选择器：<button myClickDirective>点击我</button>
在上述代码中，我们创建了一个名为MyClickDirective的自定义指令。通过@HostListener装饰器，我们将点击事件绑定到了onClick方法上。当使用该指令的元素被点击时，onClick方法会被触发，你可以在该方法中编写处理点击事件的逻辑。
推荐的腾讯云相关产品：腾讯云函数（SCF）
相关·内容
1回答
如何从另一个指令访问某个指令的属性？
angular、angular-directive
我有一个指令
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appDirOne]',
exportAs: 'appDirOne'
})
export class DirOneDirective {
status: boolean = false;
constructor() { }
}
在我的另一个指令中--当我单击托管元素时，我想要访问第一个指令的属性值的按钮。
<button appDirTwo&g
浏览 2提问于2021-07-23得票数 1
3回答
从角4中的@HostListener (动态创建单击侦听器)捕获下一次单击文档
angularjs、angular、directive、angular-directive
我有一个指令，当点击时切换它的状态。如果状态是活动的，并且用户单击页面上的任何其他位置，则状态应该被停用。
我尝试使用新的Renderer2侦听函数来动态生成侦听器来捕获“下一次单击”-这里的问题是，回调函数在创建监听器后立即执行！因此，只需单击一次就可以激活该元素，然后立即将其停用.我正在寻求帮助，了解为什么会发生这种情况，以及我需要做些什么来解决它。
指令：
import { Directive, ElementRef, Input, Output, HostListener, EventEmitter, Renderer2 } from '@angular/core';
浏览 1提问于2017-04-05得票数 0
回答已采纳
1回答
在自定义指令角4中实现onclick()
javascript、css、angular、typescript、angularjs-directive
我有一个简单的按钮和一个指令，我想访问该按钮的样式，在指令中添加一个onclick()函数(它不起作用，但是设置css来自构造函数的MarginLeft如何使用？请帮助：
该指令：
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[Bluecolored]'
})
export class BluecoloredDirective {
constructor(private element:ElementRef) {
cons
浏览 3提问于2017-10-19得票数 5
回答已采纳
1回答
添加指令以验证输入、Angular2和typescript
angular、typescript、angularjs-directive
我正在做一个带有Typescript的Angular2项目。我正在尝试创建一个验证指令，这样我就可以用输入类型发送来自Html标记的值，并用布尔值发送响应。
我写的指令是：
import { Directive, ElementRef, HostListener, Input, Output } from '@angular/core';
@Directive({
selector: '[validate]'
})
export class Validation{
@Input('validate') validateType
浏览 4提问于2017-03-13得票数 1
回答已采纳
4回答
在指令中检测输入值何时发生变化
angular、angular-directive、angular2-directives
我试图检测输入的值在指令中何时发生变化。我有以下指令：
import { ElementRef, Directive, Renderer} from '@angular/core';
@Directive({
selector: '[number]',
host: {"(input)": 'onInputChange($event)'}
})
export class Number {
constructor(private element: E
浏览 4提问于2017-01-18得票数 56
回答已采纳
5回答
角2+垂直调整尺寸div
javascript、angular、typescript、resize、angular2-directives
我是angular2的新手，我一直在尝试创建一个可调整大小的div (垂直)。但我无法做到这一点。我试着用指令
这是我的指示
import { Directive, HostListener, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[appNgxResizer]'
})
export class NgxResizerDirective {
constructor(private el: ElementRef) {
}
@HostListener(&
浏览 5提问于2017-09-26得票数 7
回答已采纳
4回答
如何使用Angular2的attribute指令添加一些html元素
angular、angular2-directives
如果某个attribute directive出现在HMTL元素上，我想显示一些额外的html内容。我已经找过了，但找不到我要找的东西。例如，如果P标记有一个名为can-delete的指令，那么我希望显示delete按钮。
<p can-delete>Hello World!</p>
这就是我到目前为止得到的：
// >>> home.ts
import { Component } from "@angular/core";
import {canDelete } from "./can-delete.directive.ts&
浏览 0提问于2016-08-15得票数 7
2回答
角:如何使用指令只允许文本框中的整数
angular
我正在尝试创建我的第一个指令。我想要的只是简单地防止在文本字段上输入。
这就是我尝试过的：
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: 'input[numbersOnly]'
})
export class NumberDirective {
constructor(private _el: E
浏览 7提问于2019-10-30得票数 0
回答已采纳
2回答
Angular 2+中带参数的单元测试指令
angular、unit-testing、karma-jasmine、angular2-directives、mouseenter
我有一个指令，在鼠标经过时改变元素的背景颜色，如下所示。 import {Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
selector: '[appHighlightme]'
})
export class HighlightmeDirective {
@Input('appHighlightme') color : string
constructor(private el:ElementRef) { }
@
浏览 43提问于2020-04-22得票数 2
回答已采纳
1回答
Angular2:如何为调用异步方法的按钮创建加载指令？
angular
我想为一个按钮/链接创建一个指令，当它被点击时，用加载器替换它的内部文本，并在调用成功或失败时重新设置它的内部文本。
下面是我如何开始的：
HTML：
<button (click)="update()" asyncLoader >Update</button>
指令：
import {
Directive,
Input,
ElementRef,
AfterViewInit,
Output,
EventEmitter,
HostListener,
} from '@angular/core';
@Dire
浏览 0提问于2016-11-15得票数 3
1回答
角指令，不能将事件侦听器附加到元素上。
angular、angular2-directives
我尝试将keyup事件绑定到属性指令中的输入元素。我尝试过正常的方式，如element.nativeElement.onkeyup或element.nativeElement.addEventListener('keyup', () => {})，但是当我输入时，什么都不会发生。
现在，我尝试使用HostListener编写这样的代码
@HostListener('keyup', ['$event']) onKeyup(e) {}
更新
事实证明，@HostListener必须是最高层才能工作。但是，当我输入输入时，什么都不会发生。这是指令
浏览 0提问于2019-11-14得票数 1
回答已采纳
2回答
Angular2 v.2.3 -具有通过formControlName语法创建的FormControl的指令访问权限
angular、angular2-forms
因此，我正在尝试创建一个可以操作FormControl的指令。
看起来，如果我在模板中使用声明表单控件的长语法，我可以将控件传递给一个指令，作为一个直接的@Input()绑定来使用它；即:使用以下模板：
<form [formGroup]="myForm">
<input type="text" id="myText" [formControl]="myForm.controls['myText']" my-directive>
</form>
和以下组件逻辑：
@Com
浏览 1提问于2016-12-16得票数 29
回答已采纳
3回答
如何防止按钮单击事件
angular、typescript、angular-directive
我创建了一个is-login.指令
<button type="button" appIsLogin (click)="sayHello()">
down
</button>
组件
sayHello() {
console.log('clicked');
}
is-login.directive.ts
import {Directive, HostListener} from '@angular/core';
@Directive({
selector: '[appIsLogin]&
浏览 1提问于2018-01-29得票数 3
2回答
主机绑定和主机监听
angular
如何在angular 2中使用主机监听器和主机绑定？我尝试了下面的主机监听器，但它总是显示Declaration expected错误。
app.component.ts：
import {Component, EventEmitter, HostListener, Directive} from 'angular2/core';
@Directive({
selector: 'button[counting]'
})
class HostSample {
public click = new EventEmitter();
@Hos
浏览 3提问于2016-01-11得票数 41
3回答
用于操作输入文本的Angular 4指令
angular、angular2-directives
我已经创建了一个简单的指令来裁剪我的输入文本(我计划稍后扩展它的功能-所以请不要推荐一个简单的onkeyup函数)，我想做一个指令工作。
我像这样使用我的指令：
<input type="text" class="form-control" inputTextFilter [(ngModel)]="data.name">
我的指令如下：
import { Directive, HostBinding, HostListener } from '@angular/core';
@Directive({
se
浏览 1提问于2017-09-19得票数 7
回答已采纳
2回答
角2中从指令中调用构件的方法
angular
这是我的代码指令：
import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[appScrollToEnd]'
})
export class ScrollToEndDirective {
constructor(private element: ElementRef) { }
@HostListener('scroll') onScroll(){
console.log(this.elemen
浏览 2提问于2017-10-02得票数 5
回答已采纳
1回答
用另一个指令包装角2+指令
javascript、angular、typescript
我试图通过创建一个指令来减少我的(角度7)应用程序中的杂乱，该指令接受一组简化的参数(如用户ID)，并显示一个ng-bootstrap弹出。
我希望该指令的工作方式尽可能类似于一个正常的ng引导弹出程序，只不过它是使用自定义指令创建的。我知道我可以对组件执行类似的操作，但是我计划在足够多的不同元素上使用这个指令，这是不可行的。
是否有可能将这样的指令包装在角2+中，如果是这样的话，实现这一点的最佳方法是什么？
import { Directive, ElementRef, OnInit, Input } from '@angular/core';
@Directive({
浏览 0提问于2019-01-03得票数 3
回答已采纳
1回答
从属性指令中获取元素内的文本
angular
我已经创建了一个角属性指令，它可以添加到一个按钮或链接，并实现某种类型的点击跟踪。请参阅这里的一个简化示例：
import { Directive, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appTrackClick]'
})
export class TrackClickDirective {
@Input() trackType = 'ButtonClick';
@Input() trackName: string;
@Hos
浏览 0提问于2019-03-21得票数 0
回答已采纳
1回答
无法解析自定义指令的所有参数
angular、angular-cli、angular2-directives
我创建了一个自定义指令来打开一个新选项卡中的链接，当在ng服务中运行时，它可以工作。但是，当我尝试构建-prod时，它显示了以下错误：
错误不能解决C:/Users/myApp/src/app/directives/open-link-in-new-tab.directive.ts：( Object，?)中OpenLinkInNewTabDirective的所有参数。
以下是指令：
import { Directive, ElementRef, HostListener, Input, Inject } from '@angular/core';
@Directive({ s
浏览 2提问于2017-09-07得票数 1
回答已采纳
3回答
Angular: updateValueAndValidity from指令
angular、angular2-forms、angular2-directives
我有一个指令，如果输入值是一个整数，在模糊上附加小数。下面是实现。
import { Directive, ElementRef, Input, OnInit, HostListener, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Directive({
selector: '[price]',
providers: [
{
provide:
浏览 1提问于2018-01-27得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
