Angular 带角度2的转盘/滑块从头开始_Angular_Typescript_Carousel

Angular 带角度2的转盘/滑块从头开始

angular typescript

Angular 带角度2的转盘/滑块从头开始,angular,typescript,carousel,Angular,Typescript,Carousel,我正在尝试用Angular 2编码旋转木马/滑块。我的想法是，我有一系列的图像 export class AppComponent { title = 'app works!'; images: Array<any> = [ { image: "1.jpg" }, { image: "2.jpg" }, { image: "3.jpg" }, { image: "4.jp

我正在尝试用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"
    }
  ];
}

目标

div

看起来像

<div class="slider__home" style="background: url({{image}})">

</div>

我如何做到这一点？我不想使用bootstrap或jQuery，只想使用纯Angular2，谢谢您的帮助。

像这样：

<div class="slider__home" [style.background]="'url('+ image +')'">

</div>

您可以像这样使用引导转盘：

index.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>


System.import（'carousel.js'）；

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>

旋转木马

// <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];
    }
}

//
// 
从'@angular/core'导入{Component}；
从'@angular/Http'导入{Http}；
@组成部分({
选择器：“旋转木马”，
templateUrl:'carousel.html'
})
导出类转盘组件{
私人启动=错误；
URL=[]；
构造函数（http:http）{
http.get（'/getcarousel'）
.subscribe（res=>this.startcaruel（res.json（））；
}
startCarousel（URL:字符串[]）{
this.url=url；
$（'.carousel'）.carousel（）；
}
isActive（url:字符串）{
返回url==this.url[0]；
}
}

我刚刚写了一个与你的问题类似的答案

如果您想了解如何从头开始创建内容滑块，这里有很好的解释。您将能够在纯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(){
      }
}

typescript
@组成部分({
选择器：“ImageShow”，
模板：`
`
})
导出类ImageShowComponent实现AfterViewInit{
图像：数组=[{“sType”：“img”，“imgSrc”：“…”}，{“sType”：“div”，“content”：“…您好，这是可滑动内容”}]；
构造函数（）{
}
}

“我如何实现这一点？”对于SO来说不是一个合适的问题。答案是：你写一些代码并把它弄明白。@jornsharpe我不能开始，因为我不知道该怎么做。我一直使用jQ。谢谢你的评论。那么你还没有准备好回答有关堆栈溢出的问题。去读一些教程，做一些研究，尝试一下。它是Angular 2，并且仍然在rc6上，在carousel上没有任何好的/（至少一个）教程！这很不幸，但仍然不是一个合适的问题。也许一旦你弄明白了，你就可以写那篇缺失的教程了？我该如何在列表中循环<代码>*ngFor在这里似乎无法使用！

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(){
      }
}