Angular Child组件不向Parent发送结果

问题描述 投票:-1回答:1

我正在尝试发出子组件值,但我很困惑如何将选择从子项传递给父项。孩子工作正常,但没有数据传递给父母。据我所知,我不需要声明一个事件发射器 - 只需使用@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)
}
angular
1个回答
1
投票

儿童组件

首先,你需要将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

© www.soinside.com 2019 - 2024. All rights reserved.