отображение нескольких дочерних компонентов в родительском компоненте при условии - PullRequest
Новая
       6

отображение нескольких дочерних компонентов в родительском компоненте при условии

0 голосов
/ 07 февраля 2019

Я работаю в приложении Angular 7, где

Цель: -

Моя цель - показать более одного дочернего компонента в родительском компоненте таким образом, чтобы одновременно отображается только один дочерний компонент , а следующий дочерний компонент отображается после нажатия на предыдущий дочерний компонент

пример: - 

<parent component>
    <h1>dummy text</h1>
    <child component1 *ngIf='c1' (click)='displayc2()'> </child component1>
    <child component2 *ngIf='c2'> </child component2> 
    <child component3 *ngIf='c3'> </child component3>
    <child component4 *ngIf='c4'> </child component4>
<parent component>

Мой способ сделать это

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

c1 = true;
c2 = false;
c3 = false;
c4 = false;

, и при щелчке по компоненту дочерний компонент 1 я вызываю функцию 

displayc2() {
    this.c2 = true;
    this.c1 = false;

    this.c3 = false;
    this.c4 = false;
}

Так что здесь яприходится снова и снова писать новую функцию, чтобы определить условие true для отображения каждого дочернего компонента.

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

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019 
<parent component>
 <h1>dummy text</h1>
 <child component1 *ngIf='c1 === 1' (click)='c1 = 2'> </child component1>
 <child component2 *ngIf='c1 === 2' (click)='c1 = 3'> </child component2> 
 <child component3 *ngIf='c1 === 3' (click)='c1 = 4'> </child component3>
 <child component4 *ngIf='c1 === 4' (click)='c1 = 1'> </child component4>
<parent component>

// В TS: 

c1 = 1;
0 голосов
/ 07 февраля 2019

Я не буду критиковать или спрашивать вас, почему вы делаете это таким образом, но есть более подходящие решения для вашей проблемы.

Кроме этого, рассмотрите возможность использования счетчика: 

<parent component>
  <h1>dummy text</h1>
  <ng-container *ngFor="let i of [0, 1, 2, 3, 4]">
    <child 
      [componentNumber]="i"
      *ngIf="i === counter"
      (click)="counter = counter + 1"></child component2> 
  </ng-container>
<parent component>

С этим ваш код упрощается и, что более важно, становится полностью динамичным.Вы можете создать 600 компонентов, все, что вам нужно сделать, это изменить массив внутри ngFor!

...