在父 html 中单击时，在 Angular 2/Ionic 中调用子方法

Posted 2023-02-22

【中文标题】在父 html 中单击时，在 Angular 2/Ionic 中调用子方法

【英文标题】：When clicked in parent's html, call child method in Angular 2/Ionic

【发布时间】：2017-10-13 09:14:51

【问题描述】：

我面对这种情况好几个小时，我找不到正确的答案。我将 angular 2 与 ionic 2 一起使用。

我有 1 页（主页 - home.ts、home.html）

和 1 个组件（GoogleMaps、google-maps.ts、google-maps.html）

在 home.html 我有这个：

<ion-header>
  <ion-navbar>
    <ion-buttons end>
      <button ion-button (click)="findMyLocation()">Find</button>
    </ion-buttons> 
  </ion-navbar>
</ion-header>

在 google-maps.ts 我有 findMyLocation 方法，但我不知道如何在我的组件中从 home.html（父页面）触发它

完整代码在这里：http://plnkr.co/edit/Qcy4BKHgC1GBMrLJO7lj

错误是：无法读取未定义的属性“findMyLocation”

编辑：我在 home.ts 中找到了使用此代码的一种方法，但我希望成为另一种更容易的方法？有吗？

@ViewChild(GoogleMaps) gmap: GoogleMaps;

  findMyLocation()
    this.gmap.findMyLocation();
  

【参考方案1】：

你可以试试这个：

<google-maps #googlemaps></google-maps>

然后像这样使用它：

<button ion-button (click)="googlemaps.findMyLocation()">Find</button>

我用一个简单的例子试了一下，效果很好。到目前为止，我还没有在文档中找到任何东西，所以我不能告诉你它到底是如何工作的。似乎 # 创建了一个引用您的组件的局部变量，然后您可以在当前范围内使用它。

【讨论】：

谢谢！这就是我要找的。​​span>