从自定义组件元素中的视图执行功能

Question

我在 Ionic3 中创建了一个自定义组件。这个组件是一个ion-card，带有他的卡片标题和一个包含一些项目的离子列表。

我想在点击卡片标题（自定义组件的一部分）时调用视图函数。

我的意思是，我有我的 View home.ts / home.html ，我在其中加载了我的组件自定义组件（这是一个带有离子卡头的离子卡）。我需要当用户点击 ion-card-header 时调用 home.ts 上声明的函数。

也许我正在尝试做一些奇怪的事情。

更新： 这是我的组件（card-parte）和我的视图（Home）。

<ion-card>
 <ion-card-header text-center text-wrap>
  {{parte.fechaFormato}} - {{parte.numero}} / {{parte.ejercicio}} 
 </ion-card-header>

 <ion-list>
    <ion-item text-wrap>
      <ion-icon name="contact" item-start></ion-icon>
      {{parte.cliente_empresa}}
    </ion-item>
 </ion-list>

然后我在我的视图 Home.html 中使用它

<ion-content>
 <span *ngIf="!nohaytareas">
 <ion-item *ngFor="let parte of datos">
  <card-parte [parte]="parte" ></card-parte>
 </ion-item>
</ion-content>

在我的 Home.ts 中我有这个功能

test(parte){
  loadParte(parte);
}

我想当我点击组件 card-parte（在卡片标题中）时，它会调用 test()

Answer 1

要触发点击组件标题的功能，只需添加 (click) 指令

<ion-card-header text-center text-wrap (click)="yourFunction()">
  {{parte.fechaFormato}} - {{parte.numero}} / {{parte.ejercicio}} 
</ion-card-header>

只需在 ts 文件或你的组件中添加yourFunction() 的声明即可触发事件

yourFunction(){
  // You can pass custom data with the last argument
  this.events.publish('headerclicked', {});
}

从你的 home.ts 在构造函数中订阅这个事件：

events.subscribe('headerclicked', (data) => {
    // You can retrive your data
    // Here you can open your view
});