在卡信息之间切换

Question

我有一个子组件，当您单击其按钮时会显示信息。

信息数据.component.html

<div class="col-12 col-sm-12 col-md-12 col-lg-12">
  <div class="col-sm-12 col-md-12 col-lg-12 p-2 info">
    <h6  (click)="questionClick()">{{headName}}
      <fa-icon [icon]="icons.faInfoCircle" class="fa-1x text-primary" transform="shrink-2"></fa-icon>
    </h6>

  </div>
  <ng-template #childTemplate>
  <div class="row" [hidden]="visibleStatus">
    <div class="col-12 bulb-section">
      <div class="row m-0">
        <div class="icon-bulb col">
      <p class="ml-4">
        {{infoData}}
      </p>
        </div>
      </div>
    </div>
  </div>
  </ng-template>
  <ng-container *ngIf="!displayInfo; then childTemplate"></ng-container>
</div>

信息数据.component.ts

export class InformationDataComponent {

  @ViewChild('childTemplate', { static: true }) childTemplate: TemplateRef<any>;

  constructor() { }
  @Input() infoData: string;
  @Input() visibleStatus: boolean;
  @Input() headName: string;
  @Input() displayInfo?: boolean;

  questionClick () {
          this.visibleStatus = !this.visibleStatus;
}
}

场景 - 在我的父组件中，我有 3 个引导卡，每个卡都有不同的数据。当我点击一张卡片时，我只想显示相应卡片的信息，在这种情况下隐藏其他两张卡片。

<div class="card">
                <div class="card-body">
                  <information-data [infoData]="salonInfo"
                                               [headName]="salonHead"
                                               [visibleStatus]="true"
                                               [displayInfo]="true"
                  ></information-data>
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4">
              <div class="card">
                <div class="card-body">
                  <information-data [infoData]="hospitalInfo"
                                               [headName]="hospitalHead"
                                               [visibleStatus]="true"
                                               [displayInfo]="true"
                  ></information-data>
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4">
              <div class="card">
                <div class="card-body">
                  <information-data [infoData]="travelInfo"
                                               [headName]="travelHead"
                                               [visibleStatus]="true"
                                               [displayInfo]="true"
                  ></information-data>
                </div>
              </div>
        <div class="row pl-5 pr-5">
           <ng-container *ngTemplateOutlet="childComponent.childTemplate"></ng-container>
        </div>
</div>

其他场景 - 我在应用程序的其他部分广泛使用这个子组件，如下所示，并且不应更改它。

            <retail-information-data [infoData]="funcInfo"
                              [headName]="funcHead"
                              [visibleStatus]="funcVisibility"
             ></retail-information-data>

如何在不影响代码其他部分的情况下实现此功能？

Answer 1

使用输出

@Output() displayInfoChange:EventEmitter<boolean>=new EventEmitter<boolean>()

当改变时

   questionClick () {
       this.visibleStatus = !this.visibleStatus;
       //
       this.displayInfoChange.emit(this.visibleStatus);
   }

因此，您可以使用两种方式绑定，并且您的父级考虑到更改，定义一个数组displayInfos

displayInfos:boolean[]=[true,false,false]

<!--change each "0", by "1" and "2" to the second and third card-->
<information-data [infoData]="salonInfo"
                  [headName]="salonHead"
                  [visibleStatus]="true"
                  [(displayInfo)]="displayInfos[0]"
                  (displayInfoChange)="displayInfos[0] && restToFalse(0)"

                  ></information-data>


    restToFalse(index:number)
      this.displayInfos=this.displayInfos.map((x,i)=>(i==index))
    }