在Angular 7中收听多个元素事件
在Angular 7中，可以通过使用事件绑定来收听多个元素事件。事件绑定是Angular中的一种机制，它允许我们在模板中监听DOM事件并执行相应的操作。
要在Angular 7中收听多个元素事件，可以使用以下步骤：
- 在组件的模板文件中，找到需要收听事件的元素，并使用方括号括起来的事件绑定语法来指定要监听的事件。例如，如果要监听一个按钮的点击事件，可以使用
(click)语法：
<button (click)="handleClick()">点击我</button>- 在组件的类文件中，定义一个与事件绑定语法中指定的事件处理器方法。在上面的例子中，我们可以定义一个名为
handleClick()的方法来处理按钮的点击事件：
handleClick() {
// 处理点击事件的逻辑
}- 在事件处理器方法中，可以执行任何逻辑来响应事件。例如，可以更新组件的属性、调用服务方法、发送HTTP请求等。
这样，当用户点击按钮时，Angular会自动调用handleClick()方法来处理点击事件。
除了点击事件，Angular还支持其他常见的DOM事件，如keyup、keydown、mouseenter、mouseleave等。可以根据需要选择适当的事件来监听。
对于多个元素事件的收听，可以在模板中使用多个事件绑定语法来监听不同的事件。每个事件绑定语法都会指定一个不同的事件处理器方法。
在Angular中，还可以使用事件修饰符来进一步控制事件的行为。例如，可以使用$event对象来访问事件的属性和方法，或者使用preventDefault()方法来阻止事件的默认行为。
关于Angular 7的更多信息和示例，请参考腾讯云的官方文档和教程：
- Angular 7官方文档：https://angular.io/docs
- 腾讯云Angular产品介绍：https://cloud.tencent.com/product/angular
相关·内容
1回答
有谁能帮我找出为什么在我提交我的表单后，我的值最终会返回小写
从“@ FormGroup /forms”导入{ FormControl，验证器}；
这是我的密码
component.ts
import { Component, Directive, OnInit, OnDestroy} from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import {UppercaseDirective} from '../upp
浏览 1提问于2017-07-17得票数 0
回答已采纳
1回答
我是Webview的初学者，试图通过$interval在webview上动态绘制标记。我正在使用谷歌地图api v3和下面的angular谷歌地图库
<html style="overflow: auto !important;" ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.googlea
浏览 0提问于2016-02-15得票数 0
我有一个页面，在这个页面上，当点击一个按钮，比如New User时，必须显示一个模型对话框。因此，模型对话框上有用于新用户条目的表单字段。除此之外，模型上还有另一个组件，它实际上是一个网格本身。
但是网格只有在模型显示时才会被加载。因此，网格内容可以根据模型值动态变化。但我面临的问题是，当页面第一次加载时，模型中的组件也会初始化并加载。如何避免这种情况，并仅在显示模型时才加载模型中网格组件
下面是我的模型组件和第三个组件的一部分
</div>
</div>
<div class=&
浏览 2提问于2018-01-12得票数 0
我有一个指令，在单击时打开一个子菜单，但我想通过只在目标元素被单击时激活文档单击来改进它。因此，问题是如何改进这个指令，或者如何动态添加主机侦听器。
import { Directive, HostListener, Input, AfterContentInit, ElementRef, ViewContainerRef, ContentChild } from '@angular/core';
@Directive({
selector: '[appSubMenu]'
})
export class SubMenuDirective implem
浏览 2提问于2016-11-19得票数 2
回答已采纳
如何使用带有Angular 5选项的函数？如果有文件，你能指给我看吗？谢谢
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
监听事件方法的角度方法似乎不允许这样做。
内幕HTML模板
<div (click)='handleClick()'/>
监听方法：
listen(target: 'window' | 'document' | 'body' | an
浏览 10提问于2018-02-23得票数 1
当按角度单击单元格时，如何获得该单元格的值？
这是我的HTML：
<ag-grid-angular
style="width: 100%; height: 300px;"
class="ag-theme-alpine"
[rowData]="list"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[pagination]="true"
[modules
浏览 11提问于2022-12-02得票数 0
回答已采纳
我有AngularJS应用程序与角剑道作为用户界面。
从其中一项服务中我发送广播给控制员。
我从服务部门发送广播如下：
angular.module('MyAppModule')
.service('MyService', ['$rootScope',function($rootScope)
{
this.MESSAGE = "broadcast_msg";
function sendBroadcast(message, data)
{
console.log("I get
浏览 4提问于2016-10-18得票数 0
在父组件的模板中，有一个嵌套组件。
<div class="inner" ng-show="!vm.loading">
<div class="info-panel">
<h3 id="basePrice">Current Cost</h3>
<p>
<small>
<a href role="button" data-toggle="
浏览 0提问于2017-07-13得票数 7
回答已采纳
1回答
import { Component, Input, Output, EventEmitter } from '@angular/core';
var colorPickerCss = "app/css/ui/color-picker.css";
var colorPickerTemplate = "app/partials/color-picker.html";
@Component({
selector: 'color-picker',
styleUrls: [colorPickerCss],
te
浏览 0提问于2017-07-29得票数 11
回答已采纳
我试图在表单标签中使用enter来提交，但它不起作用
这是我的密码
document.querySelector('#button').addEventListener('submit',(e)=>{
e.preventDefault()
console.log('it works')
})
<ul>
<li>
<div>
<form>
<input></input>
浏览 1提问于2020-11-04得票数 0
回答已采纳
我使用的是角地图UI，并通过使用我的API键加载脚本成功地从Google加载了它，Google正在正确地调用我发送的回调函数。
'use strict';
angular.module('rszmeApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.map'
])
.config(function ($routeProvider) {
$routeProvider
浏览 3提问于2014-02-22得票数 2
回答已采纳
有时候，当我的应用程序启动时，互联网连接不好，用户就会被注销。
我不想这样..。我希望用户继续登录，即使由于互联网连接不好，应用程序没有正确启动。
"@angular/fire": "^5.1.0",
我附加了我的AuthService代码，还有我的依赖项。我做错什么了？
import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular
浏览 1提问于2022-06-05得票数 0
2回答
我在angular 7中有一个复选框 当我刷新我的页面时，好的值在这里 但当我单击复选框时，该值是错误的 我的html中有我的代码： <input type="checkbox" [(ngModel)]=material.validated (click)="updateValidation(material)"> 在我的ts中： public updateValidation(material: any) {
this.requestService.updateVersionQuotation(this.quotationId, this
浏览 20提问于2019-01-28得票数 0
回答已采纳
我正在尝试从一个普通的javascript中获取一个对象标题，并在我的angular 2组件上检索它。目前，我正在将变量保存到localStorage，但是我不认为这是一个好方法。
要将变量保存到localStorage中，请在单击按钮时设置，按钮在iframe中。
谁能给我指个正确的方向，如何实现这一点？
编辑下面的答案:其余的红色位是“找不到名字”。
浏览 20提问于2016-08-31得票数 4
如何在flex (swf)应用程序和angular2应用程序之间进行通信？
我知道如何处理js和flex，但我不知道flex如何找到angular2方法。
使用JS :只需要这样的方法：
function flexUp() {
console.log('Flex Up');
}
在flex中，调用JS方法：
ExternalInterface.call("flexUp");
我是JS/Angular2 2世界的新手。
浏览 3提问于2016-05-11得票数 0
回答已采纳
我在AngularJS方面非常新，由于这个原因，我面临一个问题，无法理解确切的问题。我尝试过的代码是在普通的javascript代码中工作的，但是现在我想使用自定义服务(工厂函数)。实际上，我有一个文本区域，用户可以输入他们的文本，然后他们可以通过选择任何文本来进行格式化。(发现web.in/woweditor-这是我创建的现有站点，我现在想在这段代码中应用angular )。现在，我已经创建了一个自定义服务来检查用户是否选择了任何内容。我已经在我的自定义服务中使用了下面的代码，并尝试获取选择开始、结束点，这样我就可以从textarea字段中获得选定的文本。但是，问题是，选择起点和结束点的值都
浏览 3提问于2015-04-29得票数 0
回答已采纳
1回答
我需要从由第三方javascript插入到DOM中的音频标记中读取src属性(所以我不能修改它)。必须从服务器端对多个页面进行备份，因为目标是通过读取声音源并将其保存在服务器上来备份这些声音。
到目前为止，我尝试的是在jsdom/cheerio/幻影中使用Node.js，但是它们似乎都没有做到这一点，因为调用是在元素插入之前完成的。
这是幻影代码：
var phantom = require( 'phantom' );
var http = require('http');
var fs = require('fs');
phantom.cre
浏览 3提问于2013-12-02得票数 0
我希望在特定的div元素上实现一个JavaScrit selectionchange事件，因此如果用户从DOM中选择文本，我希望显示一个高亮显示框。我已经用onmouseup事件在web上实现了这一点。但我被困在移动设备上尝试实现这一点。
对于移动浏览器，我在DOM上绑定document.selectionchange事件，但我希望这只适用于具有content-editable类的特定元素。因此，只有当用户在具有content-editable类的页面上的容器中选择文本时，荧光笔才会显示。
document.addEventListener("selectionchange",
浏览 0提问于2017-09-08得票数 8
1回答
我正在为不同的设备开发一个网络应用程序:桌面，平板电脑，手机。我已经结合了sidenav和mediaquery (import {MediaMatcher} from '@ angular / cdk / layout';)来检测设备大小。
当我加载带有手机大小的应用程序时，sidenav将打开，但当我更改设备大小并返回到手机大小时，sidenav将不会打开。
我怎样才能解决这个问题？
被窃听的应用程序链接：
浏览 0提问于2018-10-26得票数 1
回答已采纳
如何通过单击ag网格中的列标题来获取列标题，实际上，我希望在单击列标题时执行服务器端排序和筛选，为此，我需要事件上列的名称。
HTML模板
<ag-grid-angular [gridOptions]="gridOptions" style="width: 100%;
height: 650px;" (gridReady)="onGridReady($event)"
class="ag-theme-balham" [columnDefs]="columnDefs"
浏览 2提问于2019-05-25得票数 0
2回答
我有一个列表，50.000的以太地址，可以在任何时候接收ERC20传输。
我知道我可以创建过滤器，但我不认为每20秒发送50.000个RPC调用到scales节点是不合适的。该解决方案是否要求以太节点获得所有传输事件，然后过滤RAM中的事件？
我正在使用奇偶校验和NEthereum (一个C#库)。
浏览 0提问于2019-04-18得票数 1
回答已采纳
我有一个在Chrome扩展中实现的AngularJS应用程序。它使用内容脚本在用户页面导航时将自己注入到页面中。在它中有一个$interval，它每N秒调用一次到我们的服务器，作为一种轮询机制来检查是否有新的数据返回到客户机。
myInterval = $interval(function() {
// calls back to server
}, 30000);
$scope.$on("$destroy", function() {
if (angular.isDefined(myInterval)) {
$interval.cancel(
浏览 2提问于2014-05-30得票数 0
回答已采纳
2回答
Angular使用脏检查来捕获数据更改，并相应地更改模型或视图。Ember设置每个元素的观察者来执行此过程。但是backbone是如何做到的呢？
浏览 0提问于2013-11-27得票数 2
2回答
我需要调用 function in ，在ionic 2中调用另一个控制器，有可能吗？
下面是我的代码，我想在选项卡控制器中调用loadPeople。
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {PeopleService} from '../../providers/people-service/people-service';
@Component({
selector:
浏览 4提问于2016-12-17得票数 9
我一个月前才开始学习angular JS。发现了一些困难的东西。我有下面的柱塞
<input id="tags" ng-keyup="complete()" ng-model="data"/>
selected = {{data}}
如您所见，这里有一个可用标签列表。我想通过单击按钮将index.html页面中的选定值传递给next.html页面。
实际上，我想要传递的不仅仅是一个参数。就像角度材质中的md-autocomplete一样。
我希望你们能帮助我:)谢谢。
浏览 1提问于2016-10-26得票数 0
3回答
当用户在Ionic 2上滚动时，拾取让我感到困惑。我基本上想说的是，当用户向下滚动页面时，做点什么。
任何例子都是很棒的。
更新：
我在我的构造函数中有这个，所以当页面滚动时，我想关闭键盘，因为它是打开的，没有其他关闭的方法。
import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, Content } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keybo
浏览 0提问于2017-04-03得票数 10
回答已采纳
我使用AngularJS创建了一个水平下拉菜单。
菜单部分由一个名为menuController的角控制器管理。实现标准菜单行为，以便在悬停时主菜单项被高亮显示，除非禁用。单击主菜单项时，子菜单切换。如果子菜单处于打开状态，我希望当用户单击文档上的其他任何位置时，它就会消失。我尝试创建一个指令来侦听文档单击事件，但不确定如何通知菜单控制器。我应该如何以AngularJS的方式实现这个场景？
部分工作的没有文件单击处理机制。
更新：
根据已回答的建议，我使用Brodcast方法并更新了脚本，以反映我的最新更改。它按照我的期望起作用了。我使globalController $broadcast成为
浏览 4提问于2013-10-26得票数 8
回答已采纳
当以迭代方式加载表单元格值时，我想调用searchByID()：
下面是我已经拥有的内容，我想搜索DB并返回ID的值(这是由我的searchByID()完成的)我只关心它是如何呈现的。
代码片段：
<template id="course-table-rows-template" repeat="{{item in response.entries}}">
<tr>
<td>
<a href="
浏览 2提问于2015-05-13得票数 0
回答已采纳
我正在使用LibGDX开发一款游戏，我的舞台被设置为输入处理器：
Gdx.input.setInputProcessor(stage);
一切正常工作，但现在我想采取行动的刷(左和右)。我看到一些示例建议扩展GestureListener，并将其设置为输入处理器。但如果我这样做，那么我的阶段就不能再是输入处理器了。那么，我如何同时获得触摸和滑动事件呢？
浏览 4提问于2015-12-11得票数 0
回答已采纳
我正在开发一个应用程序，我需要跟踪鼠标滚轮的移动，但我的功能在Internet Explorer中不能像我期望的那样工作。它可以在所有其他浏览器中工作，但不能在IE中工作，你知道我做错了什么吗？
杰西。
var request = true;
var onMouseWheelSpin = function(event) {
if(request === true){
request = false;
var nDelta = 0;
if (!event) { event = window.event; }
// cros
浏览 2提问于2013-05-26得票数 6
回答已采纳
我有一个音频持续时间是5分钟= 5:00，但是听整个音频太长了，所以我得到了一个标记，从例2:00分钟到3:00分钟，所以我想在HTML5音频中播放标记，意思是从2:00分钟播放到3:00分钟。
$('#audio').bind('canplay', function() {
this.currentTime = 29; // jumps to 29th secs
});
更新
这里是我的代码
<audio id="audio" controls="controls" class="span4">
浏览 3提问于2013-11-06得票数 1
我有一个针对arrow up和arrow down需求的指令。当我复制并分页指令的一个实例时，只有第二个可以工作，而第一个不能工作。 如何解决这个问题？请将焦点放在第一个元素上的第二部分“绿色”部分，并做up and down箭头移动。 directive.ts： import {
Directive,
ElementRef,
HostListener,
AfterViewInit,
} from '@angular/core';
@Directive({
selector: '[appFocuser]',
})
export class
浏览 30提问于2021-10-12得票数 0
回答已采纳
我的.css文件中的动画名为@keyframes scrollTextTwo{}。我的.js文件中的代码是：
$(document).ready(function(){
rightBox.style.animation = "scrollTextTwo 10s 1";
});
当我在浏览器中加载.html文件时，它会完美地运行一次，否则，如果我将“1”替换为"1"：在scrollTextTwo 10之后，它将无限地运行。我的问题是，如何从我的.css文件中获得第二个对象，如#leftBox，直到在上面的示例完成了它的动画之后，才能动画化。
我已经附加了所有三
浏览 3提问于2015-12-17得票数 1
1回答
我在我的项目中集成了angular6，我可以在map.But上画多边形，我不知道如何得到多边形的位置坐标，我想通过数据库搜索来显示多边形内部的用户，我查阅了官方文件，但这并没有帮助我。
我的app.component.ts文件如下
import { Component } from '@angular/core';
import {tileLayer,latLng, marker, Marker} from 'leaflet';
import * as L from 'leaflet';
@Component({
selector: '
浏览 1提问于2018-10-04得票数 0
回答已采纳
1回答
我在一个项目中使用Vimeo时遇到了一个问题，我不希望用户在播放之前看到缩略图。我通过代码触发回放，并试图在视频真正开始播放时显示它。我正在听‘播放’事件，并希望它只触发，一旦视频实际播放。但我还是能拿到缩略图。我是不是漏掉了什么？
为了清晰起见，我在听player.on('playing', ..)事件，而不是player.on('play', ..)
示例：
浏览 2提问于2022-06-23得票数 0
我有一个React (^16.12.0)应用程序。我使用Chrome，但在Firefox和其他机器上也会出现同样的错误。
下面是应用程序的链接：。在单击大的“蓝色添加”按钮几次后，您最终将在控制台中看到以下错误：
Uncaught TypeError: r[t] is not a function
下面是有问题的代码：
// src/defaults/content.js
export const education = () => ({
city: '',
country: '',
degree: '',
descrip
浏览 4提问于2020-02-20得票数 1
回答已采纳
1回答
这个代码有什么问题？
addKeyListener(new KeyHandler());
private class KeyHandler extends KeyAdapter {
public void keyPressed(KeyEvent e) {
super.keyPressed(e);
int key = e.getKeyCode();
System.out.println("test");
if(key==KeyEvent.VK_SPACE || ke
浏览 0提问于2013-08-11得票数 0
回答已采纳
我正在尝试下面的场景：
用户在select元素上选择employee (选项)。
用户双击该选项/单击一个向服务器发出POST请求的函数的按钮。
POST返回一个带有JSON的字符串(包含一个带有新select元素结构的HTML片段)。
POST回调执行两个函数:一个用JSON内容加载数组，另一个用POST带来的新选择替换旧的select (包含一个雇员列表)。
在此之前一切都很好。
新的select包含存储在数组中的选项(包含POST作为JSON数据带来的数据)。
我要把这个自动化。我已经可以通过在生成的新按钮上使用click事件来使其工作，但我的目的是在
浏览 4提问于2015-06-23得票数 3
1回答
在Brightcove文档中，
我在'brightcove.api.events.ExperienceEvent‘对象中找不到这些事件。我不得不使用浏览器的全屏事件来代替：
jQuery(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange',fullScreenChangeHandler);
我觉得这是一种黑客行为，因为Brightcove文档声明他们确实支持播放器全屏事件。此外，在浏览器全屏事件中，我不知道视频播放器是进入
浏览 5提问于2015-01-26得票数 3
我有一个应用程序，可以对某些事件(例如.click)进行AJAX调用。有没有办法用Capybara / Selenium“侦听”来自Capybara/Selenium的真正的AJAX请求？
我尝试了，但显然它只允许访问固定URL ()。
浏览 3提问于2016-02-04得票数 2
回答已采纳
2回答
如何触发任意多个HTML元素相互覆盖的多个鼠标点击事件？
我知道您可以使用pointer-events: none;让单击通过元素，但是如果我想触发元素上的鼠标单击事件和任意多个元素下的鼠标单击事件怎么办？
浏览 1提问于2018-07-15得票数 2
1回答
我正在组装一个使用Backbone.js的应用程序，它现在有两个视图，一个IndexView和一个QuizPartial。IndexView呈现了页面的大部分(一些图形等等)，并且它包含许多QuizPartials。我的问题是，当用户点击其中一个部分中的“删除”链接时，部分部分应该被删除并销毁适当的模型，而IndexView则呈现一个按钮来创建一个新的测验。但是，我无法让IndexView响应该事件。
代码：
class QuizPartial extends Backbone.View
tagName: "div"
className: "quiz"
浏览 1提问于2011-02-24得票数 2
回答已采纳
这是一个带有ASP.NET AngularJS的MVC应用程序。
当应用程序加载时，我们必须调用一些操作方法，该方法返回一个资源字典，string键字符串值。
这个资源数组/字典需要在整个应用程序中都可用。
在应用程序中访问这些资源之前，我们如何等待加载这些资源？
var app = angular.module("app", []);
app.controller("TestCtrl", ['cacheService', function (cacheService) {
var self = this;
self.test
浏览 0提问于2016-06-08得票数 0
回答已采纳
目前，为了在单击下一步按钮时更改表单文本字段中显示的记录，我使用以下代码以编程方式将下一条记录的值分配给相关的文本框：
int CurrentRowIndex = this.BindingContext[DS1, "Table1"].Position;
int NextRoecordIndex = CurrentRowIndex + 1;
然后，我在DataSet的文本框中使用NextRecordIndex填充值。我希望一旦下面的代码被执行，点击下一步按钮，下一条记录应该自动填充。
this.BindingContext[DS1, "Table"].Positi
浏览 1提问于2013-12-29得票数 0
嗯，我想知道，当用户更改位置时，是否有可能召回Tamper猴子脚本(但匹配仍然是活动的)。例如，我的脚本连接youtube网站。
当我更改视频时，我需要让脚本回忆起自己，我的实际脚本是：
// ==UserScript==
// @name xxx
// @namespace xxx
// @version 1.0
// @description xxx
// @author Ikillnukes
// @match https://www.youtube.com/*
// @match https://youtu.be/
浏览 1提问于2015-08-28得票数 5
回答已采纳
2回答
如何等待角度模块的加载？
、、、
我试图在我的角度项目中使用i18next ()，但它的加载速度似乎太慢了。这是我的设计：
angular.module('jm.i18next').config(['$i18nextProvider', function ($i18nextProvider) {
$i18nextProvider.options = {
lng: 'en',
fallbackLng: 'en',
preload: ['en'],
supportedLngs: [
浏览 1提问于2014-10-28得票数 3
回答已采纳
1回答
我有一个指令为我生成一个列表。此指令具有分页方法。我希望使用键盘控制这个列表，这样当我按左或右的列表页时，下一页或上一页。
不管怎么说，我能做到吗？
贝娄，这是我的指令代码：
app.directive("gridview", function(){
return {
restrict:'E',
transclude: true,
template:'<div><button ng-disabled="!hasPrevious()" ng-
浏览 5提问于2014-09-15得票数 2
回答已采纳
例如，我们有根范围。
<template is="dom-bind" id="app">
<div id="element-on-branch"></div>
<my-element></my-element>
</template>
然后触发一个事件
this.fire('custom')
它进入根目录，然后我需要将这个事件路由到。如何广播事件或通知分支元素？谢谢!
浏览 3提问于2015-09-15得票数 4
回答已采纳
我在input字段上附加了一个input，两者都在监听keydown事件，在某些情况下，我希望停止事件在directive中的播放。调用event.stopImmediatePropagation();并不能真正停止传播。
示例：
指令
import { Directive, HostListener } from '@angular/core';
@Directive({ selector: '[myDirective]' })
export class MyDirective {
constructor() { }
@HostListener(&
浏览 0提问于2018-07-27得票数 1
回答已采纳
我有一个有多个按钮的角应用程序，它有特定的ID。它们中的每一个都有一个单击函数，我希望跟踪用户是否单击了Button，而没有在每个方法中更改任何内容。
示例代码：
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleU
浏览 3提问于2021-07-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
