Question

我正在努力将网站迁移到Angular2。其中一个页面包含Slick轮播（Slick）。从RESTful API收到的此轮播的幻灯片数据（链接到图像，文本等）。所以我有下一个模板：

<div class="slider">
    <div *ngFor="let slider of skill?.Slider; let first = first">
        <a class="item active" href="{{ slider.SlideLinkUrl }}">
            <img src="{{ slider.SlideImageUrl }}" alt="{{ slider.Title }}" />
            <div class="carousel-caption"></div>
            <div class="slider-text">
                <div class="slider-text_author">
                    <img src="{{ slider.SmallImageUrl }}" alt="{{ slider.Name }}" /></div>
                <p class="slider-text_page">{{ slider.Title }}</p>
                <p class="slider-text_name">{{ slider.Name }}</p>
                <span class="slider-text_name__prof">{{ slider.Description }}</span>   
            </div>
        </a>
    </div>
</div>

技能 - 使用Observable从RESTful API接收的对象。要创建轮播，我必须使用jQuery调用函数：

jQuery(".slider").slick(slickOpts);

我试图从ngAfterContentInit，ngAfterViewInit调用此函数，但模板未使用从服务器收到的信息呈现，因此轮播无效。为了推迟轮播初始化的调用我在ngOnInit函数中做了下一个丑陋的黑客：

this.sub = this.route.params.subscribe(params => {
    let id = params['id'];
    this.skillService.getSkill(id).subscribe(s => {
        this.skill = s; console.log(this.skill); Observable.timer(1, 1).take(1).subscribe(() => this.initSlider());
    }, error => console.log(error)
    );
});

此处来自服务器收到的数据后，{1}}的呼叫在1毫秒后被推迟。它可以工作，但是当页面首次在没有轮播的情况下呈现时会出现可见的“跳跃”，然后在一瞬间添加旋转木马。

所以，问题是 - 只有在轮播初始化后才能显示页面的正确方法是什么？是否可以在渲染时留在上一页或只显示清晰的背景？

在Angular2渲染之后显示页面

0 个答案: