这个originalEvent来自于在Angular 2+中使用EventEmitter
在Angular 2+中，EventEmitter是一个用于在组件之间传递消息的类。当组件中的某个事件发生时，可以使用EventEmitter来触发该事件，并将相关数据传递给其他组件。
originalEvent是EventEmitter的一个属性，它表示触发事件的原始事件对象。在Angular中，事件对象通常是浏览器原生的事件对象，如鼠标点击事件、键盘事件等。originalEvent属性可以让开发人员访问和操作原始事件对象的属性和方法。
使用originalEvent属性可以实现更高级的事件处理，例如获取鼠标点击的坐标、阻止默认的事件行为、取消事件冒泡等。通过访问originalEvent属性，开发人员可以根据具体的需求来处理事件，并根据事件对象的属性和方法进行相应的操作。
在Angular中，使用EventEmitter和originalEvent可以实现组件之间的事件通信和交互。通过触发事件并传递相关数据，可以实现组件之间的数据传递和状态更新。这种事件驱动的方式可以提高组件的灵活性和复用性，使得组件之间的耦合度降低，同时也方便了代码的维护和调试。
推荐的腾讯云相关产品：腾讯云函数（云原生Serverless计算服务） 腾讯云函数是腾讯云提供的一种无服务器计算服务，可以帮助开发人员更轻松地构建和部署基于事件驱动的应用程序。腾讯云函数支持多种编程语言，包括JavaScript、Python、Java等，可以与Angular等前端框架结合使用，实现更灵活的事件处理和数据传递。
产品介绍链接地址：https://cloud.tencent.com/product/scf
相关·内容
我正在尝试做一个自定义指令，它只允许在输入type= 'tel'中输入数字。在Ionic 1 (angular1)中，我使用了如下指令，它有效地工作了
.directive('onlyDigits', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(func
浏览 0提问于2018-01-26得票数 0
在angularJS中，指令允许您执行以下操作：
angular.module('Directives').directive('myButton', [() => {
return {
restrict: 'E',
template: '<button ng-click="callback()"></button>',
bindings: { callback: '&' },
};
}]);
并把它当作：
<my-butt
浏览 10提问于2022-06-23得票数 0
回答已采纳
也许我的google-fu很弱，因为我还没有找到任何关于这方面的东西，但我想试着澄清一些关于EventEmitters在Angular 2+组件中的行为。考虑以下代码： my-chart-1.component.html <div *ngFor="let node of nodes">
<div [id]="node.id" (click)="onNodeClick(node)">
{{node.content}}
</div>
</div> my-chart-1.comp
浏览 29提问于2021-01-11得票数 0
回答已采纳
我正致力于将一些角2代码移植到Aurelia，而且大多数情况下，这是一个简单的任务。
不过，有件事我很好奇。在角2自定义元素中，我看到了引用：
@Output() onChange: EventEmitter<any> = new EventEmitter();
在事件处理程序中：
this.onChange.next(input.checked);
我的问题是:在aurelia中，什么是等价的表示？
溴hw
浏览 1提问于2016-01-26得票数 4
回答已采纳
我正在做一个应用程序，并使用Angular/ionic，我试图放置Facebook提供商，但我得到了这个错误： Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [..., ..., ..., ?[object Object]? 我的app.module： import { NgModule } from '@angular/core';
import { BrowserModule } fro
浏览 7提问于2020-08-24得票数 1
示例 web组件：
import { Component, ComponentInterface, Event, EventEmitter, h, Host } from "@stencil/core";
@Component({
tag: 'foo-testwebcomponent'
})
export class TestWebComponent implements ComponentInterface {
@Event({
eventName: 'foo-click',
cancelabl
浏览 14提问于2021-05-20得票数 0
回答已采纳
当我尝试使用ng-paste指令获取粘贴的数据时，我遇到了问题。
<input ng-model="evidence.url" ng-paste="getEvidenceInfos(evidence, $event.clipboardData.getData('text/plain'))">
当jquery在angular之后加载时，它工作得很好。
当jquery在angular之前加载时该怎么办？
<input ng-model="evidence.url" ng-paste="getEvidenceI
浏览 1提问于2014-05-19得票数 4
回答已采纳
抱歉，正如我提到的那样。我是angular 6的新手。我看过这个链接，当我在angular 6中尝试这样做的时候，我卡在了中间，因为他们说"Add dependency to timeline your angular ：ngTimeline“，这意味着是哪一个？
我安装了angular-timelinejs3。添加css和javascript到index.html.When我放置指令:在app.component.html.And中我如何导入角度的ng-timeline js3我得到了error.Template解析error.can任何人请在这方面帮助我？
In Index.
浏览 5提问于2018-07-30得票数 0
4回答
角@输出不工作
、、
尝试使用@Output事件发射器执行子到父通信，但在这里不起作用是子组件。
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
@Component({
selector: 'app-emiter',
templateUrl: './emiter.component.html',
styleUrls: ['./emiter.component.css']
})
export class EmiterCompon
浏览 2提问于2017-07-09得票数 8
回答已采纳
我使用sketch.js插件在HTML5画布上绘图。虽然它在台式机上运行良好，但在移动浏览器上似乎存在一些问题。
问题是，如果我画两种不同的形状，画布一碰到它就会重新设置为空白。
为了完全清楚，我将制作和示例：绘制数字'12‘将首先绘制'1’，然后当我开始绘制'2‘时，画布将清除并且只保留数字’2‘.
<!-- CANVAS -->
<canvas id="canvas1" style="width:100%; background:white; height:150px;"></canvas>
浏览 0提问于2013-07-04得票数 7
EventEmitter和EventEmitter<T>在Angular2中的区别是什么？使用EventEmitter<T>有什么好处？EventEmitter与EventEmitter<any>相同吗？
浏览 1提问于2016-05-13得票数 1
回答已采纳
我有一个名为app.component的主组件和一个子组件(如果允许我这样称呼它的话)，称为items.component。
app.component的脚本是：
import { Component, EventEmitter, Output } from '@angular/core';
import { ItemsClass } from './items-class';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
浏览 2提问于2017-01-20得票数 0
回答已采纳
有人能帮我理解一下JavaScript中originalEvent的用法吗？我真的找不到一个好的文档来源。
谷歌搜索结果将我带到了一个对新手来说太复杂而无法理解的讨论网站。
我最近在SO中遇到一个问题，一个人通过添加这行代码回答了这个问题。
$("#url").bind('paste', function(e) {
var val = e.originalEvent.clipboardData.getData('text/plain');
....
添加到我现有的代码中，顺便说一下，它是有效的。
如果有人能帮我理解它的用法，我将不胜感激
浏览 0提问于2013-10-27得票数 24
回答已采纳
我已经开始使用ionic从头开始构建一个应用程序，并且喜欢包含框架。
我在网页上运行这个例子没有问题，但是我用ionic失败了。
我已经用创建了这个项目
ionic start form blank --v2 --ts
我已经链接了index.html中的js文件。
<script type="text/javascript" src="build/js/libs/schema-form/angular.min.js"></script>
<script type="text/javascript" src=
浏览 33提问于2016-09-16得票数 1
我在我的angular2服务中使用EventEmitter触发一个事件。但是这个事件不会在我的组件中被捕获。
我的服务(文件- 'app.service.ts')：
import {EventEmitter, Injectable, OnInit} from "angular2/core";
@Injectable()
export class AppService{
private _event:EventEmitter<string> = new EventEmitter();
ngOnInit(){
setTimeout(()
浏览 0提问于2016-05-16得票数 0
1回答
事件未发出。
、、
目前我正在使用Angular4。现在我有麻烦了。我有这个HeaderService来更改HeaderComponent中的标题
import {EventEmitter, Injectable, Output} from "@angular/core";
@Injectable()
export class HeaderService {
@Output()
public fire: EventEmitter<String> = new EventEmitter();
constructor() {
}
public
浏览 1提问于2017-06-04得票数 0
回答已采纳
我是Angular的新手，我的任务是将AngularJs转换为Angular 8。
谁能告诉我什么是ng-scope，ng-pristine，ng-form-valid...？在Angular 8中，它的等价物是什么？
浏览 8提问于2019-11-25得票数 0
回答已采纳
我在angularjs中使用过ng-bind，如下所示
<div ng-bind="getVal()"></div>
其中getVal()返回一些值，它在控制器中。但是在Angular2中，我在组件中有一个函数getVal()，我需要像angular1一样从模板中调用它。
我试过了
<div [(ngModel)]="getVal()"></div>
但不走运，你知道吗？
浏览 3提问于2016-01-14得票数 41
回答已采纳
我记得曾见过角材料.conf在ng-conf的角2演示中使用。有人能确认这是否有效吗..。
另外，在Range2Apps中是否可以使用以下内容：
angular-material.js
angular-animate.js
angular-aria.js
我知道上面的js有一个关于角1.3+的依赖项，但是如果我在我的角2依赖项之上添加这个依赖项，该怎么办。那这些能行吗？
浏览 1提问于2015-06-03得票数 13
这是的后续问题
该算法的基本原理得到了很好的解释。
然而，我在这里有一个稍微不同的算法实现，但我不完全理解(代码来自一个大学讲座，所以我不能链接到任何源)：
// k = nr. of discs, a = start peg, b = destination peg
public static void hanoi( int k, int a, int b)
{
if( k > 0)
{
hanoi( k - 1, a, 6 - a - b); // 1. move (k-1) discs to temporary peg
System
浏览 8提问于2015-09-07得票数 0
回答已采纳
我已经创建了一个自定义指令来删除输入框中的空格，该指令在Angular版本7之前完全有效，但在Angular版本9中不起作用。 import {
Directive,
ElementRef,
Output,
EventEmitter,
} from '@angular/core';
@Directive({
selector: '[trim]',
host: {
'(blur)': 'onBlur()'
}
})
export class TrimDirec
浏览 16提问于2020-05-01得票数 0
回答已采纳
当我按照ng build；ng build --prod的指示编译时，当我使用--aot标志为AOT构建时，ng build --aot也能工作。但是，当我试图使用ngc编译它(AOT)时，我得到的错误如下：
Can't resolve all parameters for HomeComponent in /appname/src/app/home/home.component.ts: (?).
这是HomeComponent类：
import {EventManager} from 'app/directives/EventManager.directive';
@
浏览 0提问于2017-07-27得票数 1
回答已采纳
我在Angular2中创建了一些自动字词校正模块。
在我的子组件中有一个EventEmitter设置
import {Component, Input, Output, EventEmitter} from '@angular/core';
...
export class StudyThumbsComponent{
@Output() notify: EventEmitter<any> = new EventEmitter();
...
verify(input, i) {
this.answer.input = input;
this
浏览 3提问于2017-01-03得票数 1
回答已采纳
在AngularJS中滚动DIV元素时如何防止页面滚动
在阅读了这个之后，我想在AngularJS指令中应用相同的内容，但是我不知道如何.有什么建议吗？
JQuery中的示例：
$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30
浏览 5提问于2015-09-22得票数 0
回答已采纳
这是一个很小很简单的问题。在网上，我找不到任何东西，但我希望能够对我们的kendo图表进行单元测试，特别是seriesClick事件能够像预期的那样工作。问题是我似乎找不到触发这个事件的方法。我试图通过jQuery定位图表系列，并调用.click()。尝试这种方法并没有给我带来任何好处，所以在这一瞬间，我试着点击所有的东西。
$('*').each(function(){
$(this).click();
});
没有这样的运气。下面是chartOptions片段
$scope.chartOptions = {
//...
浏览 3提问于2014-05-01得票数 1
回答已采纳
2回答
我正在尝试运行Angular的ui网格，并使用以下代码：
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {RouterModule} from "@angular/router";
import {BosOverviewComponent} from "./bosoverview.component";
import {UiGridModule} from '
浏览 4提问于2017-06-13得票数 3
Angular Touch ngTouch使点击发生在触摸释放时。
有没有办法在touch start上点击？
下面的fast-click指令似乎在触摸屏上做了我想做的事情，但它在鼠标单击时不起作用。
myApp.directive('fastClick', ['$parse', function ($parse) {
return function (scope, element, attr) {
var fn = $parse(attr['fastClick']);
var initX, initY, endX
浏览 5提问于2014-07-15得票数 5
回答已采纳
1回答
我正在尝试解决在中的警告
我用的是角4.3.3，蓝鸟3.5.0
生成以下警告。
警告:在.的处理程序中创建了一个承诺。但没有从中返回，请参阅。
我所观察到的是，任何以这种方式创造的承诺都会产生同样的警告，不管它是否被称为“承诺”？
var BsDropdownState = (function () {
function BsDropdownState() {
var _this = this;
this.direction = 'down';
/* this empty promise that is neve
浏览 4提问于2017-08-11得票数 1
有人知道如何测试Router NavigationEnd Event吗？我在Angular 2中有下面的代码，我使用的是Jasmine。
import { Injectable, EventEmitter } from '@angular/core';
import { Router, NavigationEnd, Event } from '@angular/router';
@Injectable()
export class IhmPageClassService {
emitPageClass = new EventEmitter<str
浏览 3提问于2017-07-28得票数 7
在Angular网站上，他们有一个使用@Output() onVoted = new EventEmitter<boolean>();的父和子组件相互交谈的例子。见下文。
在这个给定的示例中，您是否需要从EventEmitter中取消订阅以防止内存泄漏/膨胀？或者框架会帮你解决这个问题吗？
component-interaction/src/app/voter.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
sel
浏览 0提问于2018-02-13得票数 15
回答已采纳
我有这个：
import {EventEmitter} from '@angular/core';
...
public dialogEmitter = new EventEmitter();
我在一个组件中尝试了这个：
this.x.dialogEmitter.first().subscribe(cb);
但是它说订阅不是一个函数。当我尝试时，同样的问题也出现了：
this.x.dialogEmitter.take(1).subscribe(cb);
有没有其他模式可以让我只监听第一个事件？
浏览 3提问于2018-01-30得票数 0
我很难调用setInterval函数。请在下面找到代码game.component.ts
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-game',
templateUrl: './game.component.html',
styleUrls: ['./game.component.css']
})
export class GameComponent implem
浏览 0提问于2018-05-23得票数 1
回答已采纳
1回答
我想为生成JSON的组件创建一个接口。我希望强制每个实现组件接受一个类型作为输入并生成一个输出：
import { EventEmitter, Output, Input } from '@angular/core';
import { Foo, FooConfiguration } from '../../interfaces';
interface FooConfigurator {
@Output() fooWasConfigured: EventEmitter<FooConfiguration>;
@Input() fooIn
浏览 2提问于2017-09-05得票数 4
回答已采纳
我试图在我的项目中添加一个模式，所以我找到了这个库：
我首先使用以下命令安装它：npm install ng2-bootstrap --save
我的班级看起来：
import { Directive, ElementRef, Input, Renderer, AfterViewInit, OnDestroy } from
@angular/core';
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
@Directive({
selector: '[bsModal]',
浏览 4提问于2016-11-04得票数 2
回答已采纳
1回答
两周前，我将我的整个项目更新为角5，我注意到这个事件(鼠标中心) (mouseleave)不再在我的组件上工作了。这件事以前是完美的。这是不推荐的还是什么的，还是我错过了一个进口?？
(点击)工作..。comp的html模板
<i *ngFor="let step of steps"
#ratingPicker
[ngClass]="{
'fa-star': !step.half && step.selected,
'fa-star-o': !step.half &am
浏览 4提问于2017-11-21得票数 2
回答已采纳
我有一个大型的应用程序，我刚刚开始升级到Angular 2。我们使用了很多第三方和自己开发的自定义指令，我们将在Angular 2中替换这些指令，但现在没有时间这么做。其中很多都是表单元素小部件，比如angular-ui。
在我们的Angular 2组件中，我想通过包装和升级包装器组件来弥补其中一些输入元素的不足。然而，我不能得到一个简单的例子来包装一个普通的<input>。
绑定并不像我期望的那样是双向的。并且我不确定如何配置输出参数。
下面是Angular 1组件的外观。
angular.module('app').component('ng1Wrapp
浏览 11提问于2017-01-25得票数 3
1回答
我正在将Angular2添加到一个现有的应用程序中，但是在关于RxJS类型的webpack版本中，我遇到了异常。我正在从命令行运行webpack。这里有一个指向存储库的链接。从Phase9文件夹中运行'npm install‘，然后运行'npm start’以重现错误：
ERROR in [default] c:\Dev\angular-upgrade\Phase9\node_modules\rxjs\add\operator\zipAll.d.ts:2:15
Invalid module name in augmentation, module '../../Obse
浏览 3提问于2016-08-18得票数 0
回答已采纳
如何重新编译被其他xyz库修改的HTML？其他xyz库向DOM添加了一些exra内容，现在Angular (单击)方法不起作用。 在angular 1中，我们是这样做的： 应用this.$ this.$compile(angular.element(document.querySelectorAll('.someHTMlElement')))(this.$scope)；.$apply()； 有没有人能建议一下如何在Angular 2+中做到这一点？
浏览 8提问于2019-04-17得票数 1
我有一些自定义复选框的组件，我想在网站上的不同地方使用(不重复样式，标记等。但问题是-我得到了这个组件的相同实例。因此，当我单击第一个或第二个复选框时，我更改了第一个复选框组件的“选中”状态(无关紧要)。我需要这两个“复选框”组件将是两个不同的实例，并具有不同的属性。Angular2+有可能吗？
Checkbox组件：
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'checkbox',
tem
浏览 4提问于2017-06-30得票数 0
我一直在尝试将Angular 4与prerender.io合并用于搜索引擎优化页面，但我无法看到HTML页面；它被卡在加载页面的预加载器上。我肯定漏掉了什么。
可以正常工作，并正确地重定向到
但是，不起作用:它卡在加载器页面上。
prerender.io与Angular 4兼容吗？这个问题是Angular 4特有的吗？
问候
Sajal
浏览 0提问于2017-10-31得票数 0
我有来自主题的错误的问题。我使用的是angular 7版本。这就是我的测试: landing.component.spec.ts import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LandingComponent } from './landing.component';
import { PegasPanelComponent } from '../pegas-panel/pegas-panel.component';
impo
浏览 26提问于2019-05-08得票数 4
回答已采纳
我有一个指令，当点击时切换它的状态。如果状态是活动的，并且用户单击页面上的任何其他位置，则状态应该被停用。
我尝试使用新的Renderer2侦听函数来动态生成侦听器来捕获“下一次单击”-这里的问题是，回调函数在创建监听器后立即执行！因此，只需单击一次就可以激活该元素，然后立即将其停用.我正在寻求帮助，了解为什么会发生这种情况，以及我需要做些什么来解决它。
指令：
import { Directive, ElementRef, Input, Output, HostListener, EventEmitter, Renderer2 } from '@angular/core';
浏览 1提问于2017-04-05得票数 0
回答已采纳
我创造了我自己的可观察的服务
import { Injectable, EventEmitter, Output} from '@angular/core';
@Injectable()
export class ObservableService {
data = [];
@Output eventEmitter:EventEmitter = new EventEmitter();
setSharedData(key, value) {
this.data[key] = value;
this.eventEmitte
浏览 10提问于2016-12-23得票数 2
回答已采纳
我喜欢在component中订阅EventEmitter。我在Service中写了这段代码 import { Injectable, OnChanges, EventEmitter } from '@angular/core';
import { area } from "../model-classes/area"
import { city } from "../model-classes/city"
@Injectable({
providedIn: 'root'
})
export class serviceta
浏览 25提问于2019-06-01得票数 0
在Angular2中是否有一种方法可以在某种程度上防止使用EventEmitter的事件的默认设置？
我有以下情况：
import {Component, Output, EventEmitter} from 'angular2/core'
@Component({
selector: 'my-component',
template: `<button (click)="clickemitter.emit($event); onClick($event)" [style.color]="color"><
浏览 5提问于2016-03-01得票数 13
1回答
我使用的是带有html5拖放的jquery动画，我想制作与谷歌驱动器相同的动画。
我设法做到了：
element.bind('drag', function(e) {
_.each(draggedFiles, function(id) { //draggedFiles is an array of id
id = 'fs-row-' + id;
var newRow = angular.element('body').find('div#'+ id); // Element being
浏览 1提问于2015-09-30得票数 0
回答已采纳
我正在进行的一个项目正在使用Pusher，以及用于单元测试的Karma。单元测试当前失败，原因是出现以下错误：
ReferenceError: Can't find variable: Pusher
at runBlock (/vagrant/front/src/app/index.run.js:9)
at invoke (/vagrant/front/bower_components/angular/angular.js:4771)
at /vagrant/front/bower_components/angular/angular.js:4578
a
浏览 5提问于2017-02-07得票数 0
我正在开发一个Angular 6应用程序。我开始用一个简单的datepicker创建一个组件。我不得不使用这个插件：
即使我在"angular.json“文件中放入了正确的依赖项.css和.js ( css可以很好地工作；以下是脚本.js)：
"scripts": [
"src/jquery/jquery-3.1.1.min.js",
"src/bootstrap/js/bootstrap.min.js",
"src/bootstrap-datet
浏览 0提问于2018-10-05得票数 0
我有一个应用程序模块和一个组件应用程序(用于演示我的问题)，并得到以下错误：
Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for UserService! ; Zone: <root> ; Task: Promise.then ; Value:
AppModule代码：
import { NgModule } from '@angular/core';
import { BrowserModule } from
浏览 5提问于2016-12-14得票数 5
回答已采纳
当我试图在我的angular 8应用程序中执行单元测试时，我得到了TypeError: cannot read property 'id‘of undefined。
这是我的模板
<h4>{{student.id}}</h4>
这是我的组件
import {Component, EventEmitter, Input, OnInit} from '@angular/core';
import { Student } from '@app/app-types';
@Component({
...... saved so
浏览 2提问于2019-07-30得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
