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

Question

可以从元素访问元素的模型吗？

背景

我正试图改变Ionic的离子幻灯片工作方式。有一个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在init之后传递对每个子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ča建议的č。实际上，我似乎需要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)
                    },
                },] },
    ];

这几乎成功了。它选择位于ion-slides元素本身的内容中的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>

备注

我去找了一个指向离子幻灯片源的链接，找到了这，它在打字稿中。我能做些什么来更新我在节点_模块/离子角中的版本呢？目前，所有内容都是在javascript中定义的，使用起来有点困难。

Answer 1

您需要使用ViewChild。

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

在ngOnInit中

this.elem.nativeElement

有关更多问题，请参见文档：角文档

如果它不起作用，试着在生命周期钩子ViewChild上获得它