次は、angular2-Materializeカルーセルで作業していません

Question

次の関数と前の関数を使用して、スライドからスライドへ移動します。私はJQueryを使うことができないので、 '$'はオプションではありません。私はカルーセルに[materializeActions]属性を追加し、コンポーネント内にイベントエミッタを設定しました。 "actions.emit（ 'next'）を呼び出すとエラーは発生しませんが、actions.emit（ 'badFunc'）を呼び出すとエラーが発生するため、何か問題があることが分かります。

このコードは、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'] });