Angular动态元素可见性控制：联动轮播显示需求

我明白你想要实现的效果：顶部主轮播切换时，底部只显示和当前激活幻灯片索引对应的次级轮播，而不是全部加载或者只显示某一个固定的。咱们来一步步调整你的代码，完美实现这个需求。

先分析现有代码的问题 #

你当前用show这个布尔值来控制底部轮播的显示/隐藏，这只能做到"全显或全隐"，没法精准对应到顶部轮播的具体索引；另外@ViewChild('secondary')只能拿到第一个匹配的DOM元素，对于*ngFor循环出来的多个轮播组件来说，这个引用其实没起到预期作用。

修改方案：用索引精准匹配 #

我们只需要用一个变量存储顶部当前激活幻灯片的索引，然后让底部轮播只有索引匹配的才显示即可。

修改后的TS代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-carousels',
  templateUrl: './carousels.component.html',
  styleUrls: ['./carousels.component.css']
})
export class CarouselsComponent implements OnInit {
  // 存储当前要显示的底部轮播索引，初始默认对应第一个顶部幻灯片
  public activeSecondaryIndex = 0;
  public main = [944, 1011, 984, 777];
  public second = [
    {image: [0, 1, 2], name: 'a'},
    {image: [10, 11, 12], name: 'b'},
    {image: [20, 21, 22], name: 'c'},
    {image: [30, 31, 32], name: 'd'},
  ];

  public onSlide(slideData) {
    // 同步顶部轮播的当前索引到底部轮播的显示索引
    this.activeSecondaryIndex = slideData.current;
    console.log('当前激活的顶部幻灯片索引:', this.activeSecondaryIndex);
  }

  constructor() { }

  ngOnInit() { }
}

修改后的HTML代码

<div>
  <ngb-carousel class="outter" id="Main" (slide)="onSlide($event)">
    <ng-template ngbSlide id="{{i}}" *ngFor='let M of main; index as i'>
      <div class="picsum-img-wrapper">
        <img src="https://picsum.photos/id/{{M}}/900/500" >
      </div>
    </ng-template>
  </ngb-carousel>

  <!-- 仅显示与顶部当前索引匹配的底部轮播 -->
  <div *ngFor='let s of second; index as j'>
    <ngb-carousel *ngIf="j === activeSecondaryIndex" class="inner" id="Second{{j}}">
      <ng-template ngbSlide *ngFor='let image of s.image; index as k'>
        <div class="picsum-img-wrapper">
          <img src="https://picsum.photos/id/{{image}}/900/500" >
        </div>
      </ng-template>
    </ngb-carousel>
  </div>
</div>

关键修改点说明 #

1. 用索引替代全局布尔值：把原来的show换成activeSecondaryIndex，精准控制要显示的底部轮播，而不是一刀切的显示/隐藏。
2. 同步索引：顶部轮播的(slide)事件触发时，直接将当前幻灯片的索引赋值给activeSecondaryIndex，实现顶部和底部轮播的一一对应。
3. 精准显示判断：底部轮播的*ngIf条件改为j === activeSecondaryIndex，确保只有和当前顶部幻灯片索引匹配的轮播才会被渲染显示。

额外优化建议 #

如果担心频繁创建销毁轮播组件影响性能，可以把*ngIf换成[hidden]（只是隐藏DOM元素而非移除），修改方式如下：

<ngb-carousel [hidden]="j !== activeSecondaryIndex" class="inner" id="Second{{j}}">

内容的提问来源于stack exchange，提问作者JimmyPhas