Передача значения из родительского в дочерний компонент, где дочерний элемент вложен в панель вкладок в представлении табуляции - PullRequest
Новая
       24

Передача значения из родительского в дочерний компонент, где дочерний элемент вложен в панель вкладок в представлении табуляции

0 голосов
/ 26 февраля 2020

Как указано в вопросе, дочерний компонент вложен в панель вкладок, определенную в родительском компоненте. Поскольку это представление с вкладками, в нем может быть несколько панелей вкладок, что будет означать наличие нескольких дочерних компонентов с дочерним элементом, вложенным в панель вкладок. Я хотел бы установить значение в дочернем компоненте на основе активной панели вкладок. Но независимо от вкладки, на которой я сейчас нахожусь, единственное значение, которое устанавливается, это значение вкладки 0. Для лучшего объяснения приведем урезанный прототип существующего кода. У меня есть рабочий пример, настроенный здесь: https://stackblitz.com/edit/angular-fd7b3j

Нажмите «Создать вкладки», чтобы создать несколько вкладок. Сделать вкладку 3 текущей вкладкой. Нажмите «Добавить один». Ожидаемый результат - значение элемента будет обновлено до 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}}

Ответы [ 2 ]

1 голос
/ 26 февраля 2020

это произошло, потому что вы использовали 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;
  }  
}
1 голос
/ 26 февраля 2020

изменить реализацию AddOne следующим образом 

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