时间戳

首页 > 解决方案 > 如何从另一个组件中的组件调用函数？

angular - 如何从另一个组件中的组件调用函数？

问题描述

我的问题是我有两个组件（我们称它们为comp1和comp2），我必须从 comp2 调用 comp1 中的函数，并show_it(list)使用来自comp2的一些数据。所以目前如果我用一个在comp2中实现的按钮轻松触发它，它就可以解决。但是我现在的意图是，我想通过单击带有事件的标签来触发comp1中comp2的功能。有没有人可以解决我的问题？(click)

我如何在 home.html 中调用 comp1 和 comp2：

 <comp1 [list]="lists" (emitList)="onListUpdate($event)"></comp1>
 <comp2 [list]="additionalInformationList"></comp2>

我的 home.ts 的 onListUpdate 函数：

onListUpdate(list: {item:string}[]){
    this.additionalInformationList=list;
    console.log(list);
}

我的 comp1 的 .html：

div>
<ion-list>
    <ion-item *ngFor="let list of list">
        <ion-label (click)="updateList(list)">{{list.item.free_text}}</ion-label>
        <ion-checkbox *ngIf="list.item.checkbox==true"  disabled="false"></ion-checkbox>
    </ion-item>
</ion-list>

我的 comp1 的 .ts：

@Component({
  selector: 'caiditems',
  templateUrl: 'caiditems.html'
})
export class CaiditemsComponent {
  transformedList=[];

  @Input()
  list = []; 

  @Output() 
  emitList = new EventEmitter<{item:string}[]>();

  constructor() {
    this.emitList.emit(this.list);
  }

  updateList(list) {
     if(list.item.additional_information!=null){
       this.transformedList=[
        {item: {id: list.item.id, free_text: list.item.free_text, checkbox: list.item.checkbox, additional_information: list.item.additional_information}}]
      console.log("not empty")
     }
     else{
       this.transformedList=[{item: {id: list.item.id, free_text: list.item.free_text, checkbox: list.item.checkbox, additional_information: ""}}]
       console.log("empty")
     }
     this.emitAdditionalinformations(this.transformedList);
     console.log('additional information list updated')
  }

  emitAdditionalinformations(transformedList){
    this.emitList.emit(this.transformedList);
    console.log('list emited');
  }

我的comp2 .html：

<div>
  <button ion-button (click)="show_it(list)">show it to meeeeeee</button><br>
  <ion-label>{{additionalinformation}}<br><br></ion-label>
</div>

我的comp2 .ts：

@Component({
  selector: 'caidadditionalinformations',
  templateUrl: 'caidadditionalinformations.html'
})
export class CaidadditionalinformationsComponent {
  additionalinformation="hi";

@Input()
list = []; 

constructor() {  
}

show_it(list){
  console.log(list);
  if(list[0].item.additional_information!=""){
      console.log(list[0].item.additional_information);
      this.additionalinformation=list[0].item.additional_information;
   }
  else{
      this.additionalinformation="no additional informations";
   }
}

标签： angulartypescriptionic-frameworkionic3

解决方案

从这段代码中剪下：

 <comp1 [list]="lists" (emitList)="onListUpdate($event)"></comp1>
 <comp2 [list]="additionalInformationList"></comp2>

我假设comp1两者comp2都是HomePage. 当您从 中单击一个标签时comp1，该onListUpdate($event)方法会在 中执行HomePage，对吗？

您可以在 中获取comp2组件的引用HomePage，然后show_it()使用该引用调用方法。

它会是这样的：

@Component(...)
export class HomePage {

  // Get a reference of the component instance
  @ViewChild(CaidadditionalinformationsComponent) comp2: CaidadditionalinformationsComponent;

  onListUpdate(list: {item:string}[]){
    this.additionalInformationList = list;
    console.log(list);

    // Use the reference to call the public method
    this.comp2.show_it(list);
  }

}

如果这在您的应用程序上下文中没有意义，请告诉我，也许创建一个stackblitz项目会帮助我们更好地理解您的特定场景。

还有一些其他方法可以在组件之间共享数据：

  1. 使用共享服务，您可以在其中保存数据，并且两个组件都可以从那里读取数据
  2. 使用Ionic 事件，以便两个组件都可以发布/订阅数据的更改，而不需要 HomePage 作为中介。

推荐阅读