在 Angular 17 独立模式下，如何使用 Swiper 版本 11.0.5 使 Bootstrap 下拉列表在 Swiper 元素外部可见

Question

在下面的刷卡器代码中，如何使引导下拉列表在刷卡器容器外部可见。我不想自动调整滑动器容器的高度。我希望我的容器具有固定的高度，并且只有下拉菜单溢出应该可见。我尝试设置溢出-y：在刷卡器容器中可见，但它不起作用。有人可以帮我吗。

这里是 stackblitz 链接

Html:
    <swiper-container
  appSwiper
  [config]="swiperConfig"
  style="background: black;color: white;height: 100px;"
>
  <swiper-slide>
    <div class="dropdown">
      <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </swiper-slide>
  <swiper-slide *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8, 9]"
    >Slide {{ item }}</swiper-slide
  >
</swiper-container>

ts：

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { SwiperDirective } from '../swiper.directive';
import { SwiperOptions } from 'swiper/types';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-swiper',
  standalone: true,
  imports: [SwiperDirective, CommonModule, SwiperDirective],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './swiper.component.html',
  styleUrl: './swiper.component.scss',
})
export class SwiperComponent {
  swiperConfig: SwiperOptions = {
    spaceBetween: 10,
    navigation: true,
    slidesPerView: 'auto',
  };
}

指令：

import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
import { SwiperContainer } from 'swiper/element';
import { SwiperOptions } from 'swiper/types';

@Directive({
  selector: '[appSwiper]',
  standalone: true,
})
export class SwiperDirective implements AfterViewInit {
  @Input() config?: SwiperOptions;

  constructor(private el: ElementRef<SwiperContainer>) {}

  ngAfterViewInit(): void {
    Object.assign(this.el.nativeElement, this.config);
    this.el.nativeElement.initialize();
  }
}

main.ts

import { SwiperComponent } from './swiper/swiper.component';
register();

更新： 更新代码链接

在 Shadow dom 上设置溢出可见属性时，它会增加视口的宽度并添加水平滚动条，这使得隐藏的幻灯片可见，但它不应该像那样工作。

预期行为：只有下拉菜单应该有扩展选项，而不添加水平滚动条。

Answer 1

我将“hello”保留为

中的 id 属性

<swiper-container
  appSwiper
  id="hello"
  [config]="swiperConfig"
  style="background: black;color: white;height: 100px;"
>

对于 TS 文件更改，我做了如下操作，

  el: HTMLDivElement | undefined | null;

  constructor(private rend: Renderer2) {}

  ngAfterViewChecked() {
    const sr = document.querySelector('#hello')?.shadowRoot;
    this.el = sr?.querySelector('div');
    this.rend.setStyle(this.el, 'overflow', 'visible');
  }

基本上，我所做的就是将 Shadow-root 的 div 元素溢出属性的溢出属性更改为“可见”

希望有帮助！