Angular 组件未将值发送回父组件
我的一个组件出现了问题,问题是当模型更改时,它似乎不会发出模型。它适用于我的其他组件,但对于这个组件,无论我做什么都不起作用 选择组件:Angular 组件未将值发送回父组件,angular,eventemitter,Angular,Eventemitter,我的一个组件出现了问题,问题是当模型更改时,它似乎不会发出模型。它适用于我的其他组件,但对于这个组件,无论我做什么都不起作用 选择组件: import {Component, Input, Output, EventEmitter, OnInit, DoCheck} from 'angular2/core'; @Component({ selector: 'form-select', templateUrl: './app/assets/scripts/modules/form-con
import {Component, Input, Output, EventEmitter, OnInit, DoCheck} from 'angular2/core';
@Component({
selector: 'form-select',
templateUrl: './app/assets/scripts/modules/form-controls/form-select/form-select.component.html',
styleUrls: ['./app/assets/scripts/modules/form-controls/form-select/form-select.component.css'],
inputs: [
'options',
'callback',
'model',
'modelProperty',
'optionProperty',
'disabled',
'allowEmpty',
'label'
]
})
export class FormSelectComponent implements OnInit, DoCheck {
@Input() model: any;
@Output() onModelChange: EventEmitter<any> = new EventEmitter();
private isOpen: boolean = false;
private previousModel: any = null;
ngOnInit() {
// If no model is set and the select shouldn't be allowed empty, set the model to the first option
if (!this.model && !this.allowEmpty) {
this.model = this.options[0];
}
// If it should be allowed empty, set it to null which will add an empty class in the markup
else if (this.allowEmpty) {
this.model = null;
}
}
ngDoCheck() {
// Check if the model changes and emit it if it does
if (this.previousModel !== this.model) {
this.onModelChange.emit(this.model);
}
this.previousModel = this.model;
}
toggle() {
if (this.disabled) {
this.isOpen = false;
return false;
}
this.isOpen = !this.isOpen;
}
close() {
this.isOpen = false;
}
select(option) {
this.model = option;
this.close();
this.callback ? this.callback() : false;
}
isSelected(option) {
return option[this.modelProperty] === this.model[this.modelProperty];
}
}
<div class="col-xs-12 m-b-xxs">
<pre>{{user.country}}</pre>
<form-select [(model)]="user.country" modelProperty="country" [options]="countries" optionProperty="country" label="Country"></form-select>
</div>
我做错了什么?在
@Output() modelChange: EventEmitter<any> = new EventEmitter();
@Output()onModelChange:EventEmitter=neweventemitter();
应该是
@Output()modelChange:EventEmitter=neweventemitter();
对于速记双向绑定语法,
[(…)]
属性的名称(输入和输出)需要相同,除了输出的Change
后缀。但这只是一个名称。。?反过来也不行,这很奇怪。。只要再试一次就行了。我从一开始就喜欢modelChange
,但我认为onModelChange听起来更好,我在哪里可以找到关于它的信息?它不仅仅是一个名字。这个名字意义重大。请参阅我的最新答案。如果您不希望对类的属性名称强制执行此限制,可以将名称传递给装饰器,如@Input('model')myModel
和@Output('modelChange')fancyName代码>但在其他组件中,我有一个名为onLogin
的输入,例如,然后是输出onLogin
,它仍然会发出一个值。这是一个函数,因此可能不适用相同的规则。那么,为什么我需要Change
后缀呢?因为我也将模型传递给其他组件,所以我需要它是同一个实例。。我将发布一个新问题。
@Output() modelChange: EventEmitter<any> = new EventEmitter();