Question

我有一个父组件，该组件正在使用[ [ { ... }, ... ] ]向子组件传递一些数据（selectedId）。

父模板

@Input()

子组件正在使用<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" } ] }是从父组件（API调用）填充的。
用户手动更改选择选项（来自selectedId）
API再次被调用，它应该设置与步骤1相同的ID。但是这不会触发change事件。我的假设是父组件不知道在子组件中所做的手动更改，因此它仍然持有对步骤1中child-component的引用，并且不会触发步骤3中的更改，因为它是相同的ID。

我在Stackblitz上重新创建了问题

我知道我可以使用selectedId和共享服务来解决此问题，但是还有其他方法可以将更改检测通知家长吗？

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：将输入从父级传递到子级，并添加一个事件发射器，因此，每当child中的值更改时，您都应发出一个事件以更新父级组件中的值

角度-从子组件更改Input（）不会通知父组件它已更新

2 个答案: