AngulaR语言 从子组件更改 Input() 不会通知父组件它已更新

Question

我有一个父组件，它使用@Input()将一些数据(selectedId(传递给子组件。

父模板

<child-component [selectedId]="selectedId"></child-component>

子组件按如下方式使用selectedId：

子模板

<select [(ngModel)]="selectedId">
<option [value]="option.id" *ngFor="let option of options">{{option.name}}</option>
</select>

子组件

export class HelloComponent  {
@Input()
set selectedId(id: any) {
this._selectedId = id;
}
get selectedId() {
return this._selectedId;
}
public _selectedId;
options = [
{
"id": "1",
"name": "Weekly"
},
{
"id": "2",
"name": "Bi-Weekly"
},
{
"id": "3",
"name": "Lunar"
},
{
"id": "4",
"name": "Monthly"
}
]
}

这非常有效。问题是当我直接从子组件更改所选项目时 - 不使用父组件。

当它无法按预期工作时，这是以下情况：

1. selectedId从父组件填充(API 调用(
2. 使用手动更改选择选项(从child-component(
3. API 再次被调用，它应设置与步骤 1 中设置的 ID 相同的 ID。这怎么不会触发更改事件。我的假设是父组件不知道在子组件中完成的手动更改，因此它仍然保留对步骤 1 中selectedId的引用，并且不会触发步骤 3 中的更改，因为它是相同的 ID。

我在堆栈闪电战上重现了这个问题

我知道我可以使用Output()和共享服务来解决此问题，但是还有其他方法可以通知父级有关更改检测的信息吗？

Answer 1

您可以使用@Output在子组件发生更改时通知父组件

，如下所示

@Component({
selector: 'hello',
templateUrl: './hello.component.html',
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
@Input()
set selectedId(id: any) {
this._selectedId = id;
console.log('Child change event --> ', id);
}
get selectedId() {
return this._selectedId;
}
@Output() selectedIdChange=new EventEmitter();
public _selectedId;
options = [
{
"id": "1",
"name": "Weekly"
},
{
"id": "2",
"name": "Bi-Weekly"
},
{
"id": "3",
"name": "Lunar"
},
{
"id": "4",
"name": "Monthly"
}
]
onChangeSelectedId(){
this.selectedIdChange.emit(this.selectedId);
}
}

并像这样设置值

<hello [(selectedId)]="selectedId"></hello>

Answer 2

方法 1：将此变量添加到共享服务并从那里使用它。每当孩子或父母修改它时，它就会更新。

方法 2：将输入从父组件传递到子组件并添加一个事件发射器，以便每当子组件中的值发生变化时，您应该发出一个事件来更新父组件中的值