如何在 Angular 中实现 PrimeNG 样式类以自定义轮播组件？

Question

我想使用PrimeNG's Carousel 组件并对其进行自定义。如何在我的 HTML 代码中实现它？

感谢 CSS 文件中的:host >>> .ui-carousel，我已经通过 Stackoverflow 和其他网站遵循了一些建议来帮助声明样式类。但是，我找不到在我的 HTML 文件上正确使用的方法。

CSS 代码

    :host >>> .ui-carousel {
      width: 100%;
    }

    :host >>> .ui-carousel-item {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 250px;
    }

    :host >>> .ui-carousel-items{
      width: 100%;
    }

    :host >>> .ui-carousel-viewport{
      width: 100%;
    }

    :host >>> .ui-carousel-header{
      background-color: #007aff;
    }

HTML 代码

    <p-carousel styleclass="ui-carousel-header" headerText="Items">
    </p-carousel>
    <p-carousel styleclass="ui-carousel-viewport">
      <p-carousel styleclass="ui-carousel-items">
         <p-carousel styleclass="ui-carousel-item" *ngFor="let item of items">
           <img style="height: 100%;" src="{{item.picture}}">
         </p-carousel>
      </p-carousel>
    </p-carousel>

我想要结束的只是轮播的视口部分并隐藏标题（我已经找到了这样做的方法但尚未应用它）并在其他地方使用导航按钮。 使用我这里的代码，会出现两个标题，但视口没有填满图片。

使用：Angular 7

Answer 1

我不明白你在做什么。为什么要使用多重嵌套p-carousel？？？您需要使用 ng-template 并设置 numVisible="1" 以适应项目宽度 100%

<p-carousel headerText="Items" [value]="items" numVisible="1">
    <ng-template let-item pTemplate="item">
        <img style="height: 100%;" [src]="item.picture" >
    </ng-template>
</p-carousel>

和 CSS 正常

.ui-carousel {
      width: 100%;
    }

    .ui-carousel-item {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 250px;
    }

    .ui-carousel-items{
      width: 100%;
    }

    .ui-carousel-viewport{
      width: 100%;
    }

   .ui-carousel-header{
      background-color: #007aff;
    }

演示here