Вызов дочернего метода из родительского компонента с использованием ссылочной переменной как динамической

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 вместо ссылочной переменной.

parent component.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 как свойство в родительском компоненте, вам, конечно, не нужно передавать его, просто используйте this.selectedTab в onRefreshChild.