似乎无法弄清楚为什么我的轮播组件位于但没有显示任何 CSS 或图像。
我的 app.component.ts
import { Component } from '@angular/core';
//import our Carousel Component
import {CSSCarouselComponent} from './carousel.component';
@Component({
selector: 'my-app',
directives: [CSSCarouselComponent],
templateUrl: 'app/app.component.html'
//Tell Angular we are using the css-carousel tag in this component
})
export class AppComponent { }
轮播组件.ts
// Import Component form the angular core package
import {Component} from '@angular/core';
// Import the Image interface
import {Image} from './image.interface';
// Compoent Decorator
@Component({
//Name of our tag
selector: 'css-carousel',
//Template for the tag
template:`
<div class="cover">
<div class="carousel">
<ul class="slides">
<li *ngFor=" let image of images">
<h2>{{image.title}}</h2>
<img src="{{image.url}}" alt="">
</li>
</ul>
</div>
</div>
`,
//Styles for the tag
styles: [`
.carousel{
overflow:hidden;
margin: 0% auto;
padding:0% 25%;
width:50%;
}
.slides{
list-style:none;
position:relative;
padding-left:0;
width:500%; /* Number of panes * 100% */
overflow:hidden; /* Clear floats */
/* Slide effect Animations*/
-moz-animation:carousel 30s infinite;
-webkit-animation:carousel 30s infinite;
animation:carousel 30s infinite;
}
.slides > li{
position:relative;
float:left;
width: 20%; /* 100 / number of panes */
}
.carousel img{
display:block;
width:100%;
max-width:100%;
}
.carousel img:not(:first-child){
float:left;
}
.cover{
width:100%;
margin: 0% 10%;
padding-right: 5%;
padding-left: 5%;
background-color:white;
border-top: 8px solid #eee;
border-bottom: 8px solid #eee;
}
.carousel h2{
margin-bottom: 0;
font-size:1em;
padding:1.5em 0.5em 1.5em 0.5em;
position:absolute;
right:0px;
bottom:0px;
left:0px;
text-align:center;
color:#fff;
background-color:rgba(0,0,0,0.75);
text-transform: uppercase;
}
@keyframes carousel{
0%, 23% {margin-left:0}
25%, 48% { margin-left:-105%; }
50%, 73% { margin-left:-205%; }
75%, 82% { margin-left:-305%;}
84%, 97% { margin-left:-405%;}
100% { margin-left:0;}
}
`],
})
//Carousel Component itself
export class CSSCarouselComponent {
//images data to be bound to the template
public images = IMAGES;
}
//IMAGES array implementing Image interface
var IMAGES: Image[] = [
{ "title": "Cod en Papillote ", "url": "images/cod.jpg" },
{ "title": "Lobster & Lox", "url": "images/lox.jpg" },
{ "title": "Omelette en Ciabatta", "url": "images/omlette.jpg" },
{ "title": "Tuna-Cheese Crackers", "url": "images/tuna.jpg" },
{ "title": "Homemade Thai Tea", "url": "images/tea.jpg" },
];
用于声明图像的图像类
export interface Image {
title: string;
url: string;
}
我的 app.component.html （这是应该显示轮播的地方）
<!-- Navbar Info -->
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">
<a href="#">Smash Gourmet</a>
</div>
</div>
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#">
Food
</a>
</li>
<li>
<a href="#">
Drinks
</a>
</li>
<li>
<a href="#">
Recipes
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#pablo">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li>
<a href="#pablo">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#pablo">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- End Navbar Info -->
<body>
<css-carousel></css-carousel>
</body>
所有其他文件均根据 Angular 2 快速入门设置的默认设置。我还设法让轮播作为一个独立的组件独立运行，我在尝试将它与导航集成时遇到了问题。