css - Angular4 - 为元素使用轮播的最佳方式

Question

我正在尝试使用元素轮播(不是图片)。它是给定类型的对象数组:IMyObject。因为我想一次显示一个元素，所以我没有使用 ngFor。相反，一旦我确实获取了所有对象，我将使用 Observable.timer 循环遍历元素:

Observable.timer(0, 4000)
          .map((e) => this.myObjects[e % this.myObjects.length])
          .subscribe((item) => {
                     this.currentMyObject= item;
          });

到目前为止一切顺利。我的 HTML 是:

<div *ngIf="currentMyObject">¡
    {{currentMyObject.oneOfTheProperties}}
</div>

而且我可以看到元素每 4 秒更改一次。现在我想介绍一个动画，这就是我卡住的地方。理想情况下，我希望就地淡入/淡出，但是我认为在当前的实现中，动画根本不起作用，因为如果有意义的话，没有元素变化:div 已经在页面上，但我没有进行任何可以触发动画的更改，对吗？我尝试了 Angular 动画文档 (https://angular.io/guide/animations) 中的不同示例，例如 flyInOut，或者我添加了一个状态属性以查看它是否适用于非事件/事件动画，但我无法让它工作。

另外，我不确定我是在重新发明轮子还是在让事情变得复杂。我正在使用 ng-carousel 作为图片库，我不知道它是否可以在这里重用。

非常感谢任何建议。

Answer 1

找到 Angular2-drag-scroll在 Reddit

演示站点:https://bfwg.github.io/ngx-drag-scroll/

它也兼容最新版本的 Angular(4.3.6)