Angular 2的新手.我正在广播同一级别组件之间的事件.目前我知道EventEmitter只是可以将事件传递给上层组件.
我已经检查了这个链接并知道可观察的方法可能是解决我的问题的方法,但该网址中的示例似乎对我不起作用.
有没有人知道如何使用它(可观察)广播事件或一些其他方式将事件转移到相同级别的组件?
我正在尝试在react本机类中的两个组件之间实现EventEmitter/Subscriber关系.我见过参考以下材料:
这些解决方案足以满足我的目标,但是,他们需要mixins: [Subscribable.Mixin]在接收组件上使用才能正常工作Subscriber.不幸的是,我正在使用ES6并扩展我的类,Component所以我不能使用这个mixin语法.
我的问题是:如何在不使用mixins的情况下在ES6中实现上述解决方案?
我的子模块中的每个EventEmiiter都会出现此错误,但我无法找到解决方法.
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
这是触发我的EventEmitter的原因:
ngOnChanges(changes: any) {
if (changes.groupingTabValid) {
if (changes.groupingTabValid.currentValue !== changes.groupingTabValid.previousValue) {
this.groupingTabValidChange.emit(this.groupingTabValid);
}
}
}
Run Code Online (Sandbox Code Playgroud)
这是我的"主要"组件的HTML
<year-overview-grouping [definitionDetails]="definitionDetails"
[fixedData]="fixedData"
[showValidation]="showValidation"
[groupingTabValid]="groupingTabValid"
(groupingTabValidChange)="setValidators('groupingTab', $event)">
</year-overview-grouping>
Run Code Online (Sandbox Code Playgroud)
哪个叫这个功能
public setValidators(validator: string, e: boolean) {
switch (validator) {
case "groupingTab":
this.groupingTabValid = e;
break;
case "selectionTab":
this.selectionTabValid = e;
break;
}
if (this.groupingTabValid && this.selectionTabValid) {
this.valid = true;
} else {
this.valid = false;
}
}
Run Code Online (Sandbox Code Playgroud)
1)在一个简单的解释中,是什么导致了这个错误? …
虽然欢迎其他事件库建议,但我正在使用node的eventemitter.
如果触发了几个事件,我想运行一次函数.应该监听多个事件,但如果任何一个事件触发,则会删除所有事件.希望此代码示例演示我正在寻找的内容.
var game = new eventEmitter();
game.once(['player:quit', 'player:disconnect'], function () {
endGame()
});
Run Code Online (Sandbox Code Playgroud)
处理这个问题的最简洁方法是什么?
注意:需要单独删除绑定函数,因为将绑定其他侦听器.
我的用户应该能够在画布中通过鼠标移动(或旋转)对象.当鼠标事件发生时,屏幕坐标用于计算最后一个事件的增量(方向和长度).没什么特别的...
在这一系列事件之后,应该可以重复相同的操作.
删除toRx呼叫后,此过时示例按预期工作.但是这里确定了第一个坐标的增量:github.com:rx-draggable
这是我努力调整示例中的代码:
@Component({
selector: 'home',
providers: [Scene],
template: '<canvas #canvas id="3dview"></canvas>'
})
export class Home {
@ViewChild('canvas') canvas: ElementRef;
private scene: Scene;
private mousedrag = new EventEmitter();
private mouseup = new EventEmitter<MouseEvent>();
private mousedown = new EventEmitter<MouseEvent>();
private mousemove = new EventEmitter<MouseEvent>();
private last: MouseEvent;
private el: HTMLElement;
@HostListener('mouseup', ['$event'])
onMouseup(event: MouseEvent) { this.mouseup.emit(event); }
@HostListener('mousemove', ['$event'])
onMousemove(event: MouseEvent) { this.mousemove.emit(event); }
constructor(@Inject(ElementRef) elementRef: ElementRef, scene: Scene) {
this.el = …Run Code Online (Sandbox Code Playgroud) 可以说我有3个暴露的功能:用户,帖子,文章
所有这些都需要将消息发送到名为mediator的文件,其中设置了所有事件.
目前我很难这样做
在中介文件中,我有类似的东西:
var EventEmitter = require('events').EventEmitter;
, pubsub = new EventEmitter();
exports.pubsub = new EventEmitter()
pubsub.on('loggedIn', function(msg) {
console.log(msg);
});
Run Code Online (Sandbox Code Playgroud)
以及用户,帖子和文章功能.像这样的东西:
var mediator = require('../config/mediator')
, _ = require('underscore')
exports.account = function(req, res) {
var returned = _.omit(req.user._doc, 'password' )
mediator.pubsub.emit('loggedIn', 'A User logged in');
res.send(returned);
};
Run Code Online (Sandbox Code Playgroud)
发射被完全忽略,没有错误或任何东西.不确定我是否做得对,所以任何方向都会受到赞赏.尽管如此,期望的回报仍然有效.
我不确定与Typeular本身有关的Angular 2或更多问题.但无论如何,我有一个发射对象的组件
<grid" (gridButtonClickEvent)="gridEvent($event)"></grid>
Run Code Online (Sandbox Code Playgroud)
以下是我如何捕捉这一事件
private gridEvent(event) {
console.log(event);
}
Run Code Online (Sandbox Code Playgroud)
这是我得到的事件格式.
{Key: value}
Run Code Online (Sandbox Code Playgroud)
所以基本上它是一个简单的对象.我想用名称调用一个函数Key并传递一个value参数,它怎么可能?对象Key会有所不同,但我知道我的组件中所有可能的变体和已注册的函数.
private Key() {}
Run Code Online (Sandbox Code Playgroud)
我正在尝试这样的事情
private gridEvent(event) {
let eventName = Object.keys(event)[0];
window[eventName]();
}
Run Code Online (Sandbox Code Playgroud)
但它说
window[eventName] is not a function
Run Code Online (Sandbox Code Playgroud) 我有2个文件.app.ts和Child.ts
我正在从app向子节点发送变量,我想检测变量中的任何变化并相应地显示数据.我无法检测到变量的变化.
任何帮助?我附上了Plunker Link,我还在评论中解释了我想在Child.ts文件中做什么
App.ts文件
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ChildCom} from './child.ts'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello</h2>
<child-com newdata={{data}}></child-com>
</div>
`,
})
export class App {
data: any = [];
constructor(){
this.data = [{"name":"control","status":"false"}];
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, ChildCom ],
bootstrap: [ App ]
})
export class AppModule {}
Run Code Online (Sandbox Code Playgroud)
Child.ts文件
import {Component, Input} from '@angular/core';
@Component({
selector: 'child-com',
template: `
<div>
<p>Controls: …Run Code Online (Sandbox Code Playgroud) 在Node.js中,我能够使用EventEmitter轻松地创建一个WordPress克隆,从而将一个钩子系统复制并构建到CMS核心中,然后插件可以连接到该核心.
我现在需要为我的CMS写入并移植到Go的相同级别的可扩展性和核心隔离.基本上我现在已经完成了核心,但是为了使它真正灵活,我必须能够插入事件(钩子)并使插件附加到这些具有附加功能的钩子.
我不关心重新编译(动态/静态链接),只要你不必修改核心来加载插件 - 永远不应该修改CMS核心.(如WP,Drupal等)
我注意到有一些相当未知的项目,试图在Go中实现与Node.js中的EventEmitter类似的事件:
https://github.com/CHH/eventemitter
https://github.com/chuckpreslar/emission
由于上面的这两个项目没有得到太多人气和关注,我觉得这种思考事件的方式现在可能是我们应该如何在Go中做到这一点?这是否意味着Go可能不适合这项任务?通过插件制作真正可扩展的应用程序?
似乎Go没有将事件构建到其核心中,并且RPC似乎不是将插件集成到核心应用程序中的有效解决方案,就像它们本地构建一样,并且好像它们是主应用程序本身的一部分.
无缝插件集成到您的核心应用程序中的最佳方式是什么,无需扩展点(在核心中),而无需在每次需要连接新插件时操作核心?
使用双向数据绑定时,似乎没有办法观察父组件的变化。
我有一个用于收集标签列表的自定义输入组件。双向数据绑定在此组件与其父组件之间设置和工作。
// the parent component is just a form
// here is how I'm adding the child component
<input-tags formControlName="skillField" [(tags)]='skillTags' (ngModelChange)="skillTagUpdate($event)">
</input-tags>
Run Code Online (Sandbox Code Playgroud)
在父组件中,如何观察绑定变量的变化?虽然它总是最新的(我已经确认了这一点),但我找不到任何关于对变化做出反应的指导。
我试过了:
ngOnChanges(changes: SimpleChanges) {
if (changes['skillTags']) {
console.log(this.skillTags); // nothing
}
}
Run Code Online (Sandbox Code Playgroud)
和
skillTagUpdate(event){
console.log(event); // nothing
}
Run Code Online (Sandbox Code Playgroud)
更新: TWDB 恕我直言不是它所宣传的那样。每当我到达 TWDB 似乎是一个解决方案的地方时,我都会重新设计服务和/或可观察的通信。
eventemitter ×10
angular ×6
typescript ×3
node.js ×2
broadcast ×1
events ×1
function ×1
go ×1
javascript ×1
mixins ×1
mouseevent ×1
observable ×1
react-native ×1
rxjs ×1