Angular2 template 未接收到角度为2/4的发射事件?
(字幕:我想我的代码闹鬼了…) 我有一个父组件和两个子组件:注释和位置。位置正在发出更改,并且父级收到这些更改。这很好。Notes正在发出,但显然家长从未收到 位置输入属性:Angular2 template 未接收到角度为2/4的发射事件?,angular2-template,Angular2 Template,(字幕:我想我的代码闹鬼了…) 我有一个父组件和两个子组件:注释和位置。位置正在发出更改,并且父级收到这些更改。这很好。Notes正在发出,但显然家长从未收到 位置输入属性: @Input()公共事实位置:LocationInfo//对象稍后初始化 注释输入属性: @Input()公共事实说明:string=“start” 位置HTML: 注释HTML: 位置组件输入/输出: @Input()字段位置:LocationInfo; @Output()locationEmitter:EventE
@Input()公共事实位置:LocationInfo//对象稍后初始化
注释输入属性:
@Input()公共事实说明:string=“start”代码>
位置HTML:
注释HTML:
位置组件输入/输出:
@Input()字段位置:LocationInfo;
@Output()locationEmitter:EventEmitter=新的EventEmitter()代码>
注意:组件输入/输出:
@Input()字段注释:字符串;
@Output()noteSimitter:EventEmitter=neweventEmitter()代码>
位置声明:
this.locationEmitter.emit(this.FieldLocation)代码>
注:电话:
this.noteSimitter.emit(this.FieldNotes)代码>
当我更改位置子组件中FieldLocation属性的值时,该值将反映在父组件中。当我在Notes子组件中更改FieldNotes属性的值时,它在本地更改,但在父组件中从未更改
以下是从子组件发出事件时应调用的方法:
public FactLocationChange(evt :LocationInfo){
console.log(evt);
this.FactLocation = evt;
}
public FactNotesChange(evt :string){
console.log(evt);
this.FactNotes = evt;
}
就我所知,这两者之间的一切都是相同的,除了属性名和位置发射器在响应子对象中的按键按下事件时发出信号,以及Notes发射器在计时器上(间隔)
我错过了什么
谢谢,
戴夫
PS:这是代码中“闹鬼”的部分……当它们的事件发出时,上面应该调用的两个“更改”方法实际上都被注释掉了,但位置仍然有效。我在调试时注意到了这一点——在FactLocationChange方法中放入一条“debugger”语句并没有什么区别,即使父对象中的位置正在更新。调试器从未启动
我已经尝试了注释、取消注释、重新启动、删除所有JS文件并让TSC重新生成它们的方法,所有这些方法都没有改变。我很困惑。你的代码没有闹鬼;)
事实上,即使你认为另一个在发射,它实际上不是。
对象是可变的,因此父对象将“自动”获取对象的值FactLocation
。这就是为什么家长会得到更新,即使你已经注释了发射,就像你在问题末尾提到的那样。当像这样传递对象时,实际上是在父对象中传递对象的引用,这就是更改影响父对象的原因
基本类型,如字符串是不可变的,因此它不会像对象那样发出父对象的更改
您将双向绑定与“常规”Output
one-waybinding混合在一起,因此它不会发出信号。如果您想要双向绑定,就像您想要的那样,您需要在发射器中添加后缀Change
,它还需要具有与输入相同的前缀(名称)。因此,它应该是:
@Output() FieldNotesChange: EventEmitter<string> = new EventEmitter<string>();
谢谢,成功了。我忘记了对象引用和可变性。如果我有这个选项,是否最好将原语包装在对象中,而不必连接@Output
,或者坚持原语和@Output
。老实说,Change emitter对@Output工作的神奇名称要求让人觉得有点可疑。很高兴听到它成功了!至于你的问题…完全取决于你和你的用例。在这种情况下,当您确实希望在两个组件中都有“相同的数据”时,您完全可以考虑将其包装到一个对象中,并完全跳过输出!:)
public FactNotesChange(evt :string){
this.FiedNotesChange.emit(evt)
}