Angular 17 中的滑动器和材质网格列表

Question

我遵循 this 方法在我的 Angular 17 ssr 项目中使用 swiper 元素。如果我在材质内部使用滑动器

GridList

，那么视图将无法正确渲染。是否存在渲染时序问题？ StackBlitz 最小工作示例。

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MatGridListModule } from '@angular/material/grid-list';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ MatGridListModule ],
  template: `
    <p>Swipe to change slides</p>
    <mat-grid-list cols="2" rowHeight="100px">
      <mat-grid-tile [colspan]="2" [rowspan]="2">
        <swiper-container>
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
          <swiper-slide>Slide 4</swiper-slide>
        </swiper-container>
      </mat-grid-tile>
    </mat-grid-list>`,
  styles: [
    `swiper-slide {
      height: 400px
    }
    swiper-slide:nth-of-type(1) {
      background-color: red;
    }
    swiper-slide:nth-of-type(2) {
      background-color: green;
    }
    swiper-slide:nth-of-type(3) {
      background-color: blue;
      color: white;
    }
    swiper-slide:nth-of-type(4) {
      background-color: yellow;
    }`,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {}

Answer 1

将 a 放置在 Angular Material 内时，默认情况下 swiper 组件无法正确显示。幻灯片要么没有占据全部空间，要么存在布局问题。

要解决此问题，请将 width: 100% 添加到 .这将使其占据 的整个宽度，从而允许滑动器正确渲染和分布幻灯片。

swiper-container { width: 100%; }