swiper.js用作幻灯片时不渲染组件

Question

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

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-mard-card'作为幻灯片而不是字符串，因此我将其添加为如下的字符串，但是当它在屏幕上呈现时，它就不会't插值/transpile/compile/render/等组件代码或html，调试器显示我传递的字符串。

我想这样做：

slide.push（'＆lt; app-member-card class =“路由器链接” [memberCard] =“ member”＆gt;＆lt;＆lt;/app-member-card＆gt;'）;

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

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

问题：我可以在Angular或swiper.js中做些什么，可以将此字符串转换为组件时，将其添加为幻灯片？我在Swiper Doc中找不到任何东西，也不熟悉所有角度的东西。

我尝试的 - 我尝试在.ts文件中动态创建组件并添加属性，但是当我尝试从ViewContainerRef中提取InnerHTML作为字符串时，所有数据都是空的。 这是我指向该帖子的链接

Answer 1

您正在过度使用它。有一个理由使其在Angular中“难以”注入HTML。

我在另一个问题上给您的答案应该足以满足您所需的结果。但是，最好的方法是不要存储HTML。而是存储要渲染的app-member-card所需的内容。

与此类似的内容：

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

...

virtual: {
  // cache: true,
  slides: (function() {
    const slides: Array<IMemberCard> = [];
    for (let i = 0; i < 1; i += 1) {
      slides.push({
        id: i + 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>

这正是要使用的角度，我在另一个问题中发布的hacky-thing可以。只要您不关心可维护性。通用/动态代码可能会很快变得凌乱。