[英]How to call a function from a component in another component?
我的問題是,我有兩個組成部分(讓我們稱之為COMP1和COMP2),我必須調用函數show_it(list)
從COMP2一些數據COMP1從COMP2。 所以目前如果我用一個按鈕輕松觸發它,它就可以解決,該按鈕在comp2 中實現。 但我現在的意圖是,我想通過單擊帶有(click)
事件的標簽來觸發comp1中comp2的功能。 有沒有人有解決我的問題的方法?
我如何在 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);
}
我的 .html 的 comp1:
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>
我的 .ts 的 comp1:
@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>
我的 .ts 的 comp2:
@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";
}
}
從這段代碼剪斷:
<comp1 [list]="lists" (emitList)="onListUpdate($event)"></comp1>
<comp2 [list]="additionalInformationList"></comp2>
我假設comp1
和comp2
都是HomePage
孩子。 當您單擊comp1
的標簽時,將在HomePage
執行onListUpdate($event)
方法,對嗎?
您可以在HomePage
獲取comp2
組件的引用,然后使用該引用調用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項目可以幫助我們更好地理解您的特定場景。
還有一些其他方法可以在組件之間共享數據:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.