如何在角度上访问子组件到父组件的函数

Question

尝试从子组件访问删除函数(晶片-自动完成-示例)。但无法在app.component中访问它。当我单击close (X)图标时，我希望得到该图标的值。例如，如果我单击Apple图标，我希望在警报中获得Apple文本。和其他人(柠檬、柠檬、橙、草莓)一样，我是从app.component ts文件中这样做的。但不起作用。如何解决这个问题？

app.component.ts：

  removeClick(removeval) {
    alert(removeval);
  }

app.component.html：

<chips-autocomplete-example
  (removed)="removeClick(fruit)"
></chips-autocomplete-example>

演示：https://stackblitz.com/edit/angular-sbrx2p-k89gvp?file=app.component.ts

Answer 1

不确定我是否正确地理解了您的问题，但是从子做父(以最简单的方式)，您可以使用@Output() removed = new EventEmitter<string>();和在删除函数中添加this.removed.emit(fruit)在子中，然后在父中

<chips-autocomplete-example
  (removed)="removeClick($event)"
></chips-autocomplete-example>