Блог

[ОБНОВЛЕНИЕ] Я работаю с angular 2 carousel, которая находится здесь:

https://embed.plnkr.co/ScE0uqfd0ZvL6T9j1XjL/

Я хочу добавить эффект перехода.

В carousel-example ts я добавил свойство

 <carousel [interval]="NextPhotoInterval" [noWrap]="noLoopSlides" [noTransition]="noTrans">
  

Свойство noTrans, которое я объявил внутри carousel-example.ts как private noTrans:boolean = false;

noTransition находится внутри компонента carousel как

  @Input() public noTransition:boolean;
  

(где значение noTrans по умолчанию равно false, что, согласно документации, должно разрешать переходы).

Это ничего не дало, и я не вижу никакого перехода. Кто-нибудь знает, где я ошибаюсь?

Спасибо!

В конце я реализовал свою общую карусель с помощью bootstrap, поэтому я опубликую, как я это сделал, чтобы помочь, если кто-то захочет ее использовать:

component.html:

    <div id="carousel-generic" class="carousel slide" data-ride="carousel" *ngIf="newsData">
            <ol class="carousel-indicators" [hidden]="newsData.length <=1">
                <li data-target="#carousel-generic" *ngFor="let news of newsData; let i= index" attr.data-slide-to="{{i}}" [ngClass]="{active: isActive(news)}"></li>
            </ol>
            <div class="carousel-inner news-loading" role="listbox">
                <div *ngFor="let news of newsData;" class="item" [ngClass]="{active: isActive(news)}">
                    <h4 class="center">{{news.Title}}</h4>
                    <img class="img-responsive" [src]="news.ImageUrl">
                    <div class="news">
                        <p><a target="_blank" href="{{news?.DetailsUrl}}">{{news.Text}}</a></p>
                    </div>
                </div>
                <a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev" [hidden]="!newsData.length">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next" [hidden]="!newsData.length">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
  

component.ts:

 @Component({
    selector: 'my-component',
    templateUrl: 'app/components/component.html'
})

export class NewsComponent implements OnInit{
   private newsData: NewsDataModel[];

    constructor(private _service: MyService) {}

    private isActive(news:any){
       return news === this._service.newsData[0]; 
    }

   ngOnInit() {
    this.newsData = this._service.newsData;
  } 
}
  

* Я сделал subscribe () в своем сервисе