fix(slides): set class using renderer instead of host

fixes #6275
This commit is contained in:
Brandy Carney
2016-05-05 10:28:28 -06:00
parent f355087942
commit 132d8e977a
2 changed files with 5 additions and 6 deletions

View File

@ -1,4 +1,4 @@
import {Directive, Component, ElementRef, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core'; import {Directive, Component, ElementRef, Renderer, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
import {NgClass} from 'angular2/common'; import {NgClass} from 'angular2/common';
import {Ion} from '../ion'; import {Ion} from '../ion';
@ -193,9 +193,6 @@ import {Scroll} from '../scroll/scroll';
'<div [class.hide]="!showPager" class="swiper-pagination"></div>' + '<div [class.hide]="!showPager" class="swiper-pagination"></div>' +
'</div>', '</div>',
directives: [NgClass], directives: [NgClass],
host: {
'[class]': 'slideId'
},
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
}) })
@ -340,7 +337,7 @@ export class Slides extends Ion {
@Output() move: EventEmitter<any> = new EventEmitter(); @Output() move: EventEmitter<any> = new EventEmitter();
constructor(elementRef: ElementRef) { constructor(elementRef: ElementRef, renderer: Renderer) {
super(elementRef); super(elementRef);
this.rapidUpdate = debounce(() => { this.rapidUpdate = debounce(() => {
this.update(); this.update();
@ -348,6 +345,8 @@ export class Slides extends Ion {
this.id = ++slidesId; this.id = ++slidesId;
this.slideId = 'slides-' + this.id; this.slideId = 'slides-' + this.id;
renderer.setElementClass(elementRef.nativeElement, this.slideId, true);
} }
/** /**

View File

@ -1,4 +1,4 @@
<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()"> <ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()" class="my-slides">
<ion-slide padding> <ion-slide padding>
<h1>Slide 1</h1> <h1>Slide 1</h1>
<button block (click)="goToPrevSlide()">Navigate Back</button> <button block (click)="goToPrevSlide()">Navigate Back</button>