Question

我在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;
}

所以在这里，我不得不一次又一次地编写新函数，以定义用于显示每个子组件的条件为真。

我相信还有更好的方法这是解决此类问题的非常乏味且无聊的方法，因此请纠正我或提出解决问题的更好方法

Answer 1

我不会批评或询问您为什么这样做，但是有更适合您问题的解决方案。

除此之外，请考虑使用计数器：

<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内的数组！

Answer 2

<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;

根据条件在父组件中显示多个子组件

2 个答案: