Question

我有一个子组件，该组件要在父组件中的select触发（更改）事件后才想调用的函数。这可能吗？

Answer 1

是的，您可以使用@ViewChild

尝试一下：

父组件：

HTML：

<select (change)="selectDropdownChange()">
    <option >...</option>
</select>

<child-comp #childRef></child-comp>

TS：

@ViewChild('childRef') childRef: ChildComp;

selectDropdownChange() {
    this.childRef.childFunction();
}

Answer 2

我不建议@AdritaSharma解决方案，因为它不可重用。每个实现都需要一些样板。

我曾经采用这种解决方案：

在父组件中：

// HTML:
<select (change)="onChange($event.target.value)">
  <option>...</option>
</select>
<child-component [value]="value"></child-component>

// TS:
value: string;

onChange(value: string) {
  this.value = value;
}

在子组件中：

_value: string;
@Input() 
set value(v) {
  this._value = v;
  // execute your update code
}
get value() {
  return this._value;
}

当父组件中的选择发生（更改）时，如何在子组件中执行功能

2 个答案: