Why it does not work
I do not think that this is possible with the current design of the components of slides and slides. ion-slidemust be a child ion-slides, and it must be able to find its parent slides inside the same template.
Here is the source:
@Component({
selector: 'ion-slide',
template: '<div class="slide-zoom"><ng-content></ng-content></div>',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
export class Slide {
ele: HTMLElement;
@Input() zoom: any;
constructor(
elementRef: ElementRef,
@Host() public slides: Slides
) {
this.ele = elementRef.nativeElement;
this.ele.classList.add('swiper-slide');
slides.rapidUpdate();
}
ngOnDestroy() {
this.slides.rapidUpdate();
}
}
, Slides , Slide Slides . @Host.
ion-slide , Slides, Slide.
, :
Slides Slides, Slides /- - .
slides.ts:
@Component({
selector: 'ion-slide',
template: '<div class="slide-zoom"><ng-content></ng-content></div>',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
export class Slide {
ele: HTMLElement;
@Input() zoom: any;
constructor(
elementRef: ElementRef
) {
this.ele = elementRef.nativeElement;
this.ele.classList.add('swiper-slide');
}
}
:
@Component({
selector: 'slide-item',
templateUrl: 'slide-item.html',
})
export class SlideItem {
@Input()
imgIdx: number;
constructor(elementRef: ElementRef) {
console.log("SlideItem::constructor...imgIdx="+this.imgIdx);
elementRef.nativeElement.classList.add('swiper-slide');
}
}
, , , Slides / .
, / , , . (-) .
2
Slide . ( ion-slide):
@Component({
selector: 'slide-item',
templateURL: 'slite-item.html',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
export class SlideItem {
ele: HTMLElement;
@Input() zoom: any;
@Input() imgIdx: number;
constructor(
elementRef: ElementRef
) {
this.ele = elementRef.nativeElement;
this.ele.classList.add('swiper-slide');
console.log("SlideItem::constructor...imgIdx="+this.imgIdx)
}
}
<div class="slide-zoom bcontent">
<div class="bimg">
<img data-src="images/slide{{imgIdx}}.jpeg">
</div>
<p class="info">My text</p>
</div>
, , Ionic. .
SO . , Angular (ComponentMetaData ), , . Slide.
export function CustomComponent(annotation: any) {
return function (target: Function) {
var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);
var parentAnnotation = parentAnnotations[0];
Object.keys(parentAnnotation).forEach(key => {
if (isPresent(parentAnnotation[key])) {
annotation[key] = parentAnnotation[key];
}
});
var metadata = new ComponentMetadata(annotation);
Reflect.defineMetadata('annotations', [ metadata ], target);
}
}
, , .
import { Slide } from 'ionic-angular';
@CustomComponent({
selector: 'slide-item',
templateURL: 'slite-item.html'
})
export class SlideItem extends Slide {
@Input() imgIdx: number;
}