下一个和上一个不使用angular2物化旋转木马
我想使用next和prev功能从一张幻灯片切换到另一张幻灯片。我不能使用JQuery,所以“$”不是一个选项。我向旋转木马添加了一个[materializeActions]属性,并在组件中设置了事件发射器。我知道有些东西在工作,因为当我调用“actions.emit('next')时,我没有收到错误;但是,当我调用“actions.emit('badFunc')时,我确实收到错误 此代码来自angular2 materialize提供的示例。我只添加了一个按钮来下一步移动下一个和上一个不使用angular2物化旋转木马,angular,angular2-material,Angular,Angular2 Material,我想使用next和prev功能从一张幻灯片切换到另一张幻灯片。我不能使用JQuery,所以“$”不是一个选项。我向旋转木马添加了一个[materializeActions]属性,并在组件中设置了事件发射器。我知道有些东西在工作,因为当我调用“actions.emit('next')时,我没有收到错误;但是,当我调用“actions.emit('badFunc')时,我确实收到错误 此代码来自angular2 materialize提供的示例。我只添加了一个按钮来下一步移动 <div #ca
<div #carousel class="carousel" [ngClass]="{ 'initialized': showInitialized }" materialize="carousel" [materializeActions]="actions">
<a *ngFor="let url of imageURLs" class="carousel-item"><img [src]="url"></a>
</div>
<button (click)="next()">Next</button>
下一个
来自组件的代码:
import { Component, OnInit, ViewChild, EventEmitter } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
public modules: IModule[];
@ViewChild('carousel') carouselElement;
actions = new EventEmitter<string>();
constructor() {
}
imageURLs = [
'https://image.shutterstock.com/display_pic_with_logo/1264645/364153082/stock-photo-asian-girl-in-sunflower-field-364153082.jpg',
'https://image.shutterstock.com/display_pic_with_logo/1264645/298927574/stock-photo-a-young-traveler-girl-sit-on-the-wooden-bridge-in-halong-bay-and-enjoy-the-beauty-of-seascape-298927574.jpg',
'https://image.shutterstock.com/display_pic_with_logo/1264645/298757792/stock-photo-a-young-traveler-girl-sit-on-the-top-of-mountain-in-halong-bay-and-enjoy-the-beauty-of-seascape-298757792.jpg',
'https://image.shutterstock.com/display_pic_with_logo/2565601/411902890/stock-photo-ha-long-bay-scenic-view-hanoi-vietnam-411902890.jpg',
'https://image.shutterstock.com/display_pic_with_logo/2565601/413207668/stock-photo-the-temple-of-literature-in-hanoi-vietnam-the-chinese-words-is-poem-of-thie-temple-and-templs-s-413207668.jpg'
];
ngOnInit() {
// example of a hacky way to add an image to the carousel dynamically
window.setTimeout(() => {
this.imageURLs = [this.imageURLs[0], ...this.imageURLs]; // duplicate the first iamge
this.carouselElement.nativeElement.classList.toggle('initialized');
this.actions.emit('carousel');
}, 1000);
}
next() {
// Move to next slide. This is not working
this.actions.emit('next');
}
}
从'@angular/core'导入{Component,OnInit,ViewChild,EventEmitter};
@组成部分({
选择器:“应用程序仪表板”,
templateUrl:“./dashboard.component.html”,
样式URL:['./dashboard.component.css']
})
导出类DashboardComponent实现OnInit{
公共模块:IModule[];
@ViewChild(“旋转木马”)旋转木马元素;
actions=neweventemitter();
构造函数(){
}
ImageURL=[
'https://image.shutterstock.com/display_pic_with_logo/1264645/364153082/stock-photo-asian-girl-in-sunflower-field-364153082.jpg',
'https://image.shutterstock.com/display_pic_with_logo/1264645/298927574/stock-photo-a-young-traveler-girl-sit-on-the-wooden-bridge-in-halong-bay-and-enjoy-the-beauty-of-seascape-298927574.jpg',
'https://image.shutterstock.com/display_pic_with_logo/1264645/298757792/stock-photo-a-young-traveler-girl-sit-on-the-top-of-mountain-in-halong-bay-and-enjoy-the-beauty-of-seascape-298757792.jpg',
'https://image.shutterstock.com/display_pic_with_logo/2565601/411902890/stock-photo-ha-long-bay-scenic-view-hanoi-vietnam-411902890.jpg',
'https://image.shutterstock.com/display_pic_with_logo/2565601/413207668/stock-photo-the-temple-of-literature-in-hanoi-vietnam-the-chinese-words-is-poem-of-thie-temple-and-templs-s-413207668.jpg'
];
恩戈尼尼特(){
//将图像动态添加到旋转木马的黑客方法示例
window.setTimeout(()=>{
this.imageURLs=[this.imageURLs[0],…this.imageURLs];//复制第一个iamge
this.carouselement.nativeElement.classList.toggle('initialized');
this.actions.emit('carousel');
}, 1000);
}
下一个(){
//移动到下一张幻灯片。这不起作用
this.actions.emit('next');
}
}
我找到了答案。它需要如下所示:
this.actions.emit({ action: 'carousel', params: ['next'] });
this.actions.emit({ action: 'carousel', params: ['prev'] });