typescript 从头开始使用 Angular 2 的旋转木马/滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39756289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Carousel/Slider with Angular 2 from scratch
提问by Rivadiz
I am trying to code a carousel/slider with Angular 2. Idea in my mind is, I have a array of images,
我正在尝试使用 Angular 2 编写轮播/滑块。我的想法是，我有一组图像，
export class AppComponent {
title = 'app works!';
images: Array<any> = [
{
image: "1.jpg"
},
{
image: "2.jpg"
},
{
image: "3.jpg"
},
{
image: "4.jpg"
},
{
image: "5.jpg"
},
{
image: "6.jpg"
}
];
}
I want to loop through the image array and replace the background image of a div with the current value of {{images.image}}.
我想遍历图像数组并用当前值替换 div 的背景图像{{images.image}}。
I have set up a counter,
我已经设立了一个柜台，
public subscription: any;
public time: any;
ngOnInit() {
let timer = TimerObservable.create(1000,5000);
this.subscription = timer.subscribe(t=>{
this.time = t;
})
}
and the target divwould look something like
目标div看起来像
<div class="slider__home" style="background: url({{image}})">
</div>
How do I achieve this? I don't want to use bootstrap or jQuery, but just plain Angular2, thanks for any help.
我如何实现这一目标？我不想使用引导程序或 jQuery，而只想使用普通的 Angular2，感谢您的帮助。
回答by VRPF
Like this:
像这样：
<div class="slider__home" [style.background]="'url('+ image +')'">
</div>
回答by Shailesh kala
You can use bootstrap carousel like this:
您可以像这样使用引导轮播：
index.html
索引.html
<html>
<head>
<!-- Insert all css data here -->
</head>
<body>
<carousel></carousel>
<!-- Insert all needed scripts here -->
<script>
System.import('carousel.js');
</script>
</body>
</html>
carousel.html
carousel.html
<div id="carousel-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let url of urls" class="item" [ngClass]="{active: isActive(url)}">
<img src="{{url}}" alt="{{url}}">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
<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">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
carousel.ts
carousel.ts
// <reference path="jquery.d.ts" />
// <reference path="boodstrap.d.ts" />
import {Component} from '@angular/core';
import {Http} from '@angular/http';
@Component({
selector: "carousel",
templateUrl: 'carousel.html'
})
export class CarouselComponent {
private start = false;
urls = [];
constructor(http: Http) {
http.get('/getcarousel')
.subscribe(res => this.startCarousel(res.json()));
}
startCarousel(urls: string[]) {
this.urls = urls;
$('.carousel').carousel();
}
isActive(url: string) {
return url === this.urls[0];
}
}
回答by Ravinder Payal
I have just wrote an answer for this questionwhich is similar to your question.
我刚刚为这个问题写了一个与您的问题类似的答案。
If you want to learn how create a content slider from scratch, here on by blog, it's well explained. You will be able to create an light weight slider in pure angular 2 and css, and it will be as simple as the following example in use.
如果您想了解如何从头开始创建内容滑块，请参阅博客，这里有很好的解释。您将能够在纯 angular 2 和 css 中创建一个轻量级滑块，它会像下面使用的示例一样简单。
typescript
@Component({
selector: 'ImageShow',
template: `
<contentSlider [slides]="images"></contentSlider>
`
})
export class ImageShowComponent implements AfterViewInit{
images:Array<any> = [{"sType":"img","imgSrc":"..."},{"sType":"div","content":"...Hello It's slidable content"}];
constructor(){
}
}
