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

Question

我面对这种情况好几个小时，我找不到正确的答案。我正在使用角 2 和离子 2。

我有 1 页 (主页 - 首页.ts， 首页.html(

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

在家里.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方法，但我不知道如何在家中的组件中触发它.html(家长页面(

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

错误是：无法读取未定义的属性"查找我的位置">

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

@ViewChild(GoogleMaps) gmap: GoogleMaps;
  findMyLocation(){
    this.gmap.findMyLocation();
  }

Answer 1

你可以试试这个：

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

然后像这样使用它：

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

我用一个简单的例子尝试了它，它奏效了。到目前为止，我还没有在文档中找到任何内容，所以我无法告诉您这究竟是如何工作的。似乎 # 创建了一个局部变量，其中包含对组件的引用，然后您可以在当前范围内使用它。