Question

我在Ionic3中创建了一个自定义组件。此组件是一个ion-card，带有其卡头和一个包含某些项目的离子列表。

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

我的意思是，我在View home.ts / home.html中加载了组件custom-component（这是一个带有离子卡标题的离子卡）。当用户单击离子卡标题时，我需要调用在home.ts上声明的函数。

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

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

<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);
}

我想单击组件卡部件（在卡标题中）时，它会调用test（）

Answer 1

要通过点击组件标题触发功能，只需添加$cs = get-wmiobject -class "Win32_ComputerSystem" $Mem = [math]::Ceiling($cs.TotalPhysicalMemory / 1024 / 1024 / 1024)指令

(click)

只需在ts文件或您的组件中添加<ion-card-header text-center text-wrap (click)="yourFunction()"> {{parte.fechaFormato}} - {{parte.numero}} / {{parte.ejercicio}} </ion-card-header>的声明并触发事件

yourFunction()

在您的home.ts中，在构造函数中订阅此事件：

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

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

1 个答案: