切换/切换动态创建的组件答案

【问题标题】：Switch / Toggle dynamically created components切换/切换动态创建的组件
【发布时间】：2017-10-31 10:22:47
【问题描述】：

我在父组件中有两个动态创建的子组件。我的目标是在这些组件之间切换/切换。

<div *ngFor="let device of devices; let i = index">
  <app-standart-view [value]="device.value" (click)="SWICH TO DETAIL-VIEW"></app-standart-view>
  <app-detail-view [value]="device.value"  (click)="SWICH TO STD-VIEW"></app-detail-view>
</div>

场景：

当我单击<app-standart-view> 时，它会自行隐藏并显示<app-detail-view>。但仅适用于被点击的组件index = i。其余的不应该改变。

我该怎么做？

谢谢

【问题讨论】：

标签： html angular

【解决方案1】：

你可以使用 *ngIf 在 ts 文件中定义一个变量

hide:boolean =true
switchView(){
this.hide=!this.hide
}

在html中

<app-standart-view [value]="device.value" *ngIf= "hide" (click)="switchView()"></app-standart-view>
  <app-detail-view [value]="device.value"  *ngIf= "!hide" (click)="switchView()"></app-detail-view>

【讨论】：

此代码切换所有子组件。我的目标只是切换点击的元素。
所以如果我点击 app app-standart-view 它应该隐藏自己但 app-detail-view 不会发生任何事情是正确的
当我点击app-standart-view 时，它应该隐藏自己并显示app-detail-view，反之亦然。 BUT：只针对被点击的索引。

【解决方案2】：

我会在您的 <app-detail-view> 中使用 *ngIf='device.toShow' 指令

显然，在您使用<app-standart-view> 上的点击事件的方法中设置toShow 的正确值

【讨论】：

【解决方案3】：

<div *ngFor="let device of devices; let i = index">
  <app-standart-view [value]="device.value" *ngIf="show" (click)="swichView(i)"></app-standart-view>
  <app-detail-view [value]="device.value" *ngIf="!show" (click)="swichView(i)"></app-detail-view>
</div>

对于特定的索引，你需要通过索引和检查索引

show:boolean = true;
swichView(index:number){
    if(index === 1 ){
        this.show = !this.show;
    }
}

【讨论】：

我不想切换元素1。我的目标是切换点击的元素。