使用引用变量作为动态变量从父组件调用子方法

Question

父组件html。

selectedTab动态更改为0,1,2,3。

<div fxFlex="50%" class="back_link refresh_icon" (click)="index_[selectedTab].refreshData(activatedRouteSnapshot)">
</div>

<app-child1 #index_2></app-child1>
<app-child2 #index_3></app-child2>

我在child2.ts 中有一个方法

refreshData(test){
console.log(test)
}

我收到以下问题。

无法读取未定义的属性"3">

Answer 1

使用Observer代替引用变量。

父组件.ts

selectedTabSubject: Subject<any> = new Subject();
onRefreshChild(activatedRouteSnapshot) {
this.selectedTabSubject.next({ id: activatedRouteSnapshot, index: this.selectedTab });
}

在父html 中

<app-charging-ports [selectedIndex]="selectedTabSubject"></app-charging-ports>

在child.ts 中

ngAfterViewInit(){
this.selectedIndex.subscribe(value => { 
console.log('value is changing', value);
});
}
@Input() selectedIndex: Subject<any>;

Answer 2

您应该能够在单击时调用的父级中使用@ViewChildren+函数。

// Parent component
@ViewChildren(child2) tabs: QueryList<child2>;   <= put the actual class name of that child component
onRefreshChild(selectedTab, activatedRouteSnapshot) {
tabs[selectedTab].refreshData(activatedRouteSnapshot);
}

在html:中

<div fxFlex="50%" class="back_link refresh_icon" (click)="onRefreshChild(selectedTab, activatedRouteSnapshot)">
</div>

如果在父组件中有selectedTab作为属性，当然不需要传递它，只需在onRefreshChild中使用this.selectedTab即可。