将ngx-joyride用作使用* ngFor渲染的组件（卡）的包装

Question

我将卡呈现为grid，我具有对象列表，并且我正在使用* ngFor来迭代和显示卡（每个对象的卡组件）。我想用ngx-joyride包裹每张卡，这样当新用户第一次进入时可以看到每张卡的导览文字。 I have this right now

  <ng-container *ngFor="let file of files ">

    <app-card  [data]="file"> </app-card>

  </ng-container>

我想要这样的东西：

  <ng-container *ngFor="let file of files ">
    <div joyrideStep="firstStep" title="Page Title" text="Main title!"> 
      <app-card  [data]="file"> </app-card>
    </div>
  </ng-container>

但是当我尝试这样做时，它会影响整个样式，并且不会应用到我在网格中拥有的每张卡片上。

Answer 1

我不确定我是否正确理解了您的问题，但由于信誉而无法发表评论，因此我认为我会根据自己在Joyride和{{1} }。抱歉，如果我没有您的需要。

对于我认为您需要我的建议的是，将joyride属性放在*ngFor组件上，如下所示：

<app-card>

如果您希望本教程突出显示卡片的特定元素（例如卡片上的按钮），那么您将需要joyride属性位于<ng-container *ngFor="let file of files "> <app-card [data]="file" joyrideStep="firstStep" title="Page Title" text="Main title!"> </app-card> </ng-container> 组件中的特定元素上。根据我到目前为止的经验，这只会使该教程仅出现在<app-card>

的最后一个实例中

希望有帮助：-）

编辑：

实际上，当我测试以上内容时，我发现了一种稍微有效的方法。

如果我按照我之前说的做，那么Joyride似乎并没有突出显示卡片组件-因此，它看起来像是一个通用的教程步骤，不涉及任何内容。

相反，如果我在*ngFor文件中的最高父元素上设置了joyride属性，则我的卡片元素已正确突出显示。

像这样：

card.component.html

card.component.html

再次-希望对您有所帮助。