将值从父组件传递到子组件，其中子组件嵌套在 tabview 的 tabpanel 中

Question

正如问题中所述，子组件嵌套在父组件定义的选项卡面板中。因为它是一个 tabview，我可以在其中有多个选项卡面板，这意味着多个子组件，子组件嵌套在选项卡面板中。我想根据活动的选项卡面板在子组件中设置一个值。但不管我在哪个选项卡中，唯一设置的值是选项卡 0 的值。为了更好地解释，这里是现有代码的精简原型。我在这里设置了一个工作示例：https://stackblitz.com/edit/angular-fd7b3j

单击 'Create Tabs' 创建几个选项卡。使选项卡 3 成为当前选项卡。单击 'Add One'。预期结果是元素值将更新为 4，但选项卡 0 中的元素值更新为 1。如何将操作重定向到正确的选项卡？这可能吗？

app.component.html

<p-button label="Create Tabs" (onClick)="handleClick()"></p-button>
<p-button label="AddOne" (onClick)="AddOne()"></p-button>
<p-tabView (onChange)=setIndex($event) [(activeIndex)]="index">
  <p-tabPanel #panel [header]="elememt" *ngFor="let elememt of counterList; let i = index" [selected]="i == currentIndex" >
    <app-main #main [element]="counterList[i]"></app-main>
  </p-tabPanel>
</p-tabView>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { MainComponent } from './main/main.component';
import { TabViewNav, TabView } from 'primeng/tabview';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tabViews';
  currentIndex = 0;
  @ViewChild('main') main: MainComponent;

  @ViewChild ('panel') panel: TabView;
  counter = 0;
  counterList: number[] = [];

  index = 0;

  handleClick(event: Event) {
      this.counterList = [...this.counterList, this.counter];

      setTimeout(() => {
        this.index = this.counter;
        this.currentIndex = this.counter;
        this.counter = this.counter + 1;
    }, 100);
  }

  setIndex(event) {
    this.currentIndex = event.index;
  }

  AddOne() {
    console.log(this.index);
    this.main.element = this.main.element + 1;
  }
}

main.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  @Input() element: number;

  constructor() { }

  ngOnInit() {
  }
}

main.component.html

{{element}}

Answer 1

像这样更改 AddOne 的实现

AddOne() {
    this.counterList[this.currentIndex]++;
}

Answer 2

发生这种情况，因为您使用了 ViewChild，它只为您提供了对第一个组件的 1 个引用。现在只需使用 ViewChildren 获取您的子组件的数组，然后您可以通过 currentIndex 调用它们中的每一个。您所要做的就是修复 currentIndex，它必须通过选项卡视图的 onChage 操作进行更改。好好享受吧:))))

import { Component, ViewChild, ViewChildren, QueryList  } from '@angular/core';
import { MainComponent } from './main/main.component';
import { TabViewNav, TabView } from 'primeng/tabview';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tabViews';
  currentIndex = 0;
  @ViewChildren('main') main: QueryList<MainComponent>;

  @ViewChild ('panel') panel: TabView;
  counter = 0;
  counterList: number[] = [];

  tabIndex = 0;

  handleClick(event: Event) {
      this.counterList = [...this.counterList, this.counter];
      setTimeout(() => {
      this.currentIndex = this.counter;
      this.counter = this.counter + 1;     
     }, 100);
  }

  AddOne() {
    console.log(this.tabIndex);
   this.main.toArray()[this.currentIndex].element = this.main.toArray()[this.currentIndex].element  + 1;
  }  
}

将值从父组件传递到子组件，其中子组件嵌套在 tabview 的 tabpanel 中

Passing value from parent to child component, where child is nested within a tabpanel of a tabview

tabpanel

typescript

primeng

angular