angular - ngb-carousel 更改起始幻灯片

Question

我正在使用 Angular 5 和ngb-carousel. 轮播在模板上有 3 张幻灯片，每张幻灯片都有不同的 id。我想根据传递给承载幻灯片的组件的数据设置起始幻灯片。

我遇到的问题是，如果我曾经@ViewChild获得对轮播的引用，它在ngOnOnit钩子上是未定义的，所以我不能在那里做任何事情。ngAfterViewInit它在钩子中是“未”未定义的，所以我可以调用该select()函数来更改幻灯片，但是我遇到了“检查后表达式已更改”。错误。总之，@ViewChild在 时不返回轮播ngOnInit，如果我更改期间查看的幻灯片，ngAfterViewInit我会收到更改错误。

是否有更好的方法根据传递给组件的数据设置 ngb-carousel 的起始幻灯片？

标签： angularslidelifecycleng-bootstrap

Answer 1

我想我有一个解决方法。鉴于@ViewChild 不会及时为 ngOnInit 获得 ngb-carousel 的引用，并且我必须在 ngAfterViewInit 挂钩中调用 select()，然后在 SetTimeout 调用中包装 select 调用，如下所示将确保当前的 Javascript VM 周期将在不影响视图的情况下完成，然后进行完全合法的更改。更多关于此链接的信息：

https://blog.angular-university.io/angular-2-what-is-unidirectional-data-flow-development-mode/

这是有效的代码：

ngAfterViewInit() {
    setTimeout(() => {
        this.carousel.select('3');
    });
}