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

Question

是否可以从元素访问元素的模型？

背景

我正在尝试改变 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-slides 父级的情况下使用 ion-slide 而不会出现模板解析错误，例如在自定义 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 DOM 元素，它们是 Slides 组件的子元素，但是如何访问它们的角度模型？

我尝试了什么

1) 在Slides init 期间，我可以很好地选择ion-slides 元素。如何访问这些元素的模型？真的，我只需要设置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;

2) @matej-maloča 建议 ViewChild。真的，看起来我需要ContentChildren，所以我在Slides 中添加了一个ContentChildren 选择器。

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 元素本身的内容中的Slide 组件，但不是 容器组件内的组件（例如自定义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>

注意事项

我去寻找 ion-slides 源的链接，并在 typescript 中找到了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 获取它