Question

iam目前正在使用嵌套幻灯片构建一些应用。用户可以垂直和水平滑动。

到目前为止工作真的很好，但是当我改为第二张幻灯片时，我无法访问活动索引。

这是我的模板：

(function () {
//factory

angular.module('app')
.factory('appFactory', ['$http', function ($http){

  this.getlist = function(){            
        return $http.get('data.json')
            .then(function(response) {
              return response.data;
            });            
    };
    return this;
}]);

}());

angular.module('app').controller('appCtrl', ['$scope', '$http', '$log','$location', 'appFactory',
//controller   
    function($scope, $http, $log, $location, appFactory) {

    // Chapters  json data
    appFactory.getlist()
    .then(function(data) {
        $scope.events = data;
    });

}]);

这是我的代码：

<ion-slides #exerciseSlider [options]="exerciseSliderOptions" (ionDidChange)="onExerciseSlideChanged()">
    <ion-slide *ngFor="let exercise of workout.exercises; let i = index;">

        <ion-slides #setSlider [options]="setSliderOptions" (ionDidChange)="onSetSlideChanged()">

            <template ngFor let-set [ngForOf]="exercise.sets" let-setNumber="index">

                <ion-slide [attr.data-timer]="exercise.sets[setNumber].duration">
                .....
                </ion-slide>

            </template>

        </ion-slides>
    </ion-slide>
</ion-slides>

所以每个练习都有X套。

我想我必须创建“@ViewChild（'setSlider'）setSlider：Slides;”动态。

这是对的吗？

问题是：如何？

另一种解决方案是为每张幻灯片创建一个并在用户滑动时加载它。

或者有一种苦涩的方法来解决这个问题吗？

编辑：

我现在设法获得了一个任务列表：

@ViewChild('exerciseSlider') exerciseSlider:Slides; // Main Slider
@ViewChild('setSlider') setSlider:Slides; // Nested Slider -> there are 3 or more nested slides for each main slide

onExerciseSlideChanged() {
    console.log(this.setSlider);
    let currentIndex = this.exerciseSlider.getActiveIndex();
    console.log("Current index is", currentIndex);
}

onSetSlideChanged() {
    window.clearInterval(this.interval);
    let that = this;
    let exerciseIndex = this.exerciseSlider.getActiveIndex();
    let setSliderIndex = this.setSlider.getActiveIndex();
    console.log(this.setSlider.getActiveIndex());

现在我需要的是从QueryList中获取一个项目。

例如：setSliders [0] ---＆gt;不工作。

有什么想法吗？

Answer 1

您可以使用Log::info()获取所有@ViewChildren()个组件实例（您也可以像当前一样查询IonSlides），然后只查询您真正想要的结果。

'setSlider'

Angular 2：动态ViewChild还是动态模板？

1 个答案: