背景

我正试图改变Ionic的ion slides工作方式。有一个Slides组件和一个Slide组件，用法如下：

<ion-slides>
  <ion-slide> Slide 1 </ion-slide>
  <ion-slide> Slide 2 </ion-slide>
</ion-slides>

每个Slide都需要引用它的父Slides。它是这样实现的：

export var Slide = (function () {
    function Slide(elementRef, slides) {
        this.slides = slides;
        this.ele = elementRef.nativeElement;
        this.ele.classList.add('swiper-slide');
        slides.rapidUpdate();
    }
    ...
    Slide.prototype.ngOnDestroy = function () {
        this.slides.rapidUpdate();
    };
    Slide.decorators = [
        { type: Component, args: [{
                    selector: 'ion-slide',
                    template: '<div class="slide-zoom"><ng-content></ng-content></div>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                },] },
    ];
    Slide.ctorParameters = [
        { type: ElementRef, },
        { type: Slides, decorators: [{ type: Host },] },
    ];
    Slide.propDecorators = {
        'zoom': [{ type: Input },],
    };
    return Slide;
}());

这意味着，如果没有ion-slide父级，则无法使用ion-slides而不会出现模板解析错误，例如：在自定义ion-slide包装中，例如：

@Component({
  selector: 'myslide',
  template: '<ion-slide> <h1> Test Header </h1> <ng-content></ng-content> </ion-slide>',
})
export class MySlide {
  constructor() {}
}

与

<ion-slides>
    <myslide> Slide 1 </myslide>
    <myslide> Slide 2 </myslide>
</ion-slides>

问题

我正在尝试修改离子幻灯片代码以允许Slide Slides父Slides Slide让ion-slide向每个孩子Slides传递对自己的引用在初始之后。我可以轻松访问Slides组件的ion-slides DOM元素，但如何访问其角度模型？

我尝试了什么

1）在slides初始化期间，我可以选择Slides.prototype.ngOnInit = function () { // this query works var slide_elems = this.getNativeElement().querySelectorAll('ion-slide'); // this obviously doesn't work because // slides needs to be a attribute of the model, // not the DOM elem slide_elems[0].slides = this;元素。如何访问这些元素的模型？实际上，我只需要设置ViewChild模型变量。

ContentChildren

2）@ matej-maloča建议ContentChildren。确实看起来我需要Slides，所以我在Slides.decorators = [ { type: Component, args: [{ selector: 'ion-slides', template: '<div class="swiper-container">' + '<div class="swiper-wrapper">' + '<ng-content></ng-content>' + '</div>' + '<div [class.hide]="!showPager" class="swiper-pagination"></div>' + '</div>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, queries: { 'ionSlides': new ContentChildren(Slide) }, },] }, ];添加了Slide选择器。

ion-slides

这几乎有效。它会选择myslide元素本身内容中的ion-slides个组件，但不组件内的组件（例如自定义<ion-slides> <-- selected by ContentChildren --> <ion-slide>Slide 1</ion-slide> <ion-slide>Slide 2</ion-slide> <-- the ion-slide within myslide is not selected!! --> <myslide>Slide 3</myslide> </ion-slides>）。有没有办法选择那些嵌套的{{1}}元素？

{{1}}

备注

我去寻找离子幻灯片来源的链接，找到了this，这是打字稿。我该怎么做才能将我在node_modules / ionic-angular中的版本更新到此？目前在javascript中定义的所有内容都有点难以使用。

Answer 1

您需要使用ViewChild。

// it's variable
@ViewChild('ion-slide') elem: any;

在ngOnInit：

this.elem.nativeElement

有关更多问题，请参阅文档：angular docs

如果它不起作用，请尝试在生命周期挂钩ngAfterViewInit上使用ViewChild获取它

以角度访问元素的对象模型？

背景

问题

我尝试了什么

备注

1 个答案: