我正在尝试发出子组件值,但我很困惑如何将选择从子项传递给父项。孩子工作正常,但没有数据传递给父母。据我所知,我不需要声明一个事件发射器 - 只需使用@Output()注释。这不正确吗?
WORKS(我可以看到lgselected属性更改):
儿童HTML:
{{lgselected.shortName}}
<mat-form-field>
<mat-select [(ngModel)]="lgselected">
<mat-option *ngFor="let s of lglist$" [value]="s">{{s.shortName}}</mat-option>
</mat-select>
</mat-form-field>
儿童TS
lgselected: LicenseGroup;
不工作(当我改变孩子时没有控制台输出):
父html:
<lgselector (lgselected)="lg"></lgselector>
父组件:
@Input() set lg(lg: LicenseGroup) {
this._lg = lg;
console.log('lg updated: ' + this._lg.id)
}
首先,你需要将lgselected
设置为@Output()
和EventEmmiter()
@Output() lgselected = new EventEmmiter();
然后你需要在emit
上(changes)
值
所以你将它添加到mat-select
<mat-select (change)="change($event)">
然后,您可以在子组件中设置change
方法
change(event) {
console.log(event);
lgselected.emit(event);
}
在父组件中只调用emit方法
<lgselector (lgselected)="somethingChanged($event)"></lgselector>
在*.component.ts
中创建此方法
somethingChanged(event) {
console.log(event);
}
你这里不需要@Input()
。
为了更好地理解组件交互,请查看here