用作幻灯片时，Swiper.js 不呈现组件

Question

我正在使用 swiper.js 将 virtual slides 添加到我的 swiper。根据示例，包含幻灯片的数组使用如下字符串（文档说幻灯片：任何，但我尝试了组件和其他东西，但没有其他工作）：

virtual: {
  // cache: true,
  slides: (function() {
    const slides = [];
    for (let i = 0; i < 1; i += 1) {
      slides.push('<img src="https://picsum.photos/600/600/?image=1/>';
    }
    return slides;
  })()
},

问题 - 我想使用自定义组件“app-member-card”作为我的幻灯片而不是字符串，所以我将它添加为如下所示的字符串，但是当它呈现在屏幕它不会插入/转换/编译/渲染/等组件代码或 HTML，调试器会显示我传递给它的字符串。

我想这样做：

slides.push('');

下面是我在屏幕上看到的：

<div class="card member-card">
  <div class="row">...other tags left out here for verbosity</div>
</div>

问题：我可以在 Angular 或 swiper.js 中做些什么，以便在将其添加为幻灯片时将此字符串转换为组件？我在 swiper 文档中找不到任何内容，并且对所有 Angular 的东西都不熟悉。

我尝试了什么 - 我尝试在我的 .ts 文件中动态创建组件并添加属性，但是当我尝试从 viewContainerRef 中提取 innerHTML 作为字符串时，所有数据都是空的。 Here is my link to that post on SO

Answer 1

你做得过火了。在 Angular 中附加 HTML 是有原因的。

answer I gave you at the other question 应该足以满足您想要的结果。但是，最好的方法是不存储 HTML。相反，存储app-member-card 渲染所需的内容。

类似的东西：

export interface MemberCardData {
    id: number;
    url: string;
    wSize: number;
    hSize: number;
}

...

virtual: {
  // cache: true,
  slides: (function() {
    const slides: Array<MemberCardData> = [];
    for (let i = 0; i < 1; i += 1) {
      slides.push({
        id: 1;
        url: 'https://picsum.photos',
        wSize: 600,
        hSize: 600
      });
    }
    return slides;
  })()
},

然后在你的 HTML 中你可以直接渲染app-member-card：

<div class="row" *ngFor="let slide of slides">
    <app-member-card class="router-link" [MemberCard]="slide"></app-member-card>
</div>

这就是 Angular 的使用方式，只要您不关心可维护性，我在另一个问题中发布的骇人听闻的东西就可以使用。通用/动态代码很快就会变得混乱。