Question

我想使用next和prev函数从幻灯片移动到幻灯片。我无法使用JQuery所以＆＃39; $＆＃39;不是一种选择。我将[materializeActions]属性添加到我的轮播中，并在我的组件中设置事件发射器。我知道有些事情有效，因为我打电话给＃34; actions.emit（＆＃39; next＆＃39;）我没有收到错误;但是，当我打电话给＃34; actions.emit（＆＃39; badFunc＆＃39;）时，我确实收到了错误消息。

此代码来自angular2-materialize提供的示例。我添加的只是一个按钮，然后移动。

<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');
  }

}

Answer 1

我找到了答案。它需要看起来像这样：

this.actions.emit({ action: 'carousel', params: ['next'] });
this.actions.emit({ action: 'carousel', params: ['prev'] });

接下来并且不使用angular2-Materialize轮播

1 个答案: