Как получить доступ к элементам с помощью ViewChild и выполнить событие click - PullRequest
Новая
       43

Как получить доступ к элементам с помощью ViewChild и выполнить событие click

0 голосов
/ 14 ноября 2018

В моем компоненте этот внешний модуль называется AngularMglModule . Я хочу выполнить метод click для первой записи 'mgl-timeline-entry-dot'. Некоторая внутренняя операция с библиотекой происходит по событию click на mgl-timeline-entry-dot. 

<mgl-timeline [toggle]="true" #mglTimeline>

    <mgl-timeline-entry *ngFor="let entry of entries; let i = index;"
                        (expand)="onExpandEntry($event, i)">

      <mgl-timeline-entry-header (click)="onHeaderClick($event)" [ngClass]="isExpanded(entry)?'timeline-header':''">
        <div>{{ entry.name}}</div>
      </mgl-timeline-entry-header>

      <mgl-timeline-entry-content class="timeline-content">
        // some content on expand operation
      </mgl-timeline-entry-content>

      <mgl-timeline-entry-dot #dots>
      </mgl-timeline-entry-dot>
    </mgl-timeline-entry>
</mgl-timeline>

Я пытался использовать @ViewChild('mglTimeline') public mglTimeline: ElementRef; для доступа к нему, а затем также пытался получить доступ к его дочерним элементам, но безрезультатно. Я хочу получить способ использовать nativeElement для первой записи из mgl-timeline-entry-dot, чтобы я мог выполнить событие click для него. Я сделаю это в методе ngAfterViewInit (), чтобы действие, инициируемое библиотекой при щелчке точки, было вызвано мной в моем коде.

Еще одно сомнение в том, что я не могу получить доступ к @ViewChild('dots') public dots: ElementRef; или @ViewChildren('dots') public dots: QueryList<any>;

1 Ответ

0 голосов
/ 14 ноября 2018

mgl-timeline-entry-dot вероятно MglTimeLineEntryDotComponent, а не ElementRef.

Следовательно, когда вы «кликаете» на него, вы, вероятно, вместо этого нажимаете на внутренний элемент.

Но чтобы ответить на ваш вопрос, используйте свойство read дочернего декоратора представления: 

@ViewChild('dots', { read: ElementRef }) public dots: ElementRef;
...