angular 2 - Как получить HTMLElement / ElementRef дочернего компонента с помощью ссылочной переменной шаблона?

Я пытаюсь получить элемент дочернего компонента с помощью ViewChild, но не могу найти способ добиться этого.

Скажем в шаблоне:

...
<some-comp #someComp></some-comp>
...

и получить эту ссылку:

import { SomeComponent } from './some-comp/some-comp.component';
...
@ViewChild('someComp') someComp: SomeComponent;
...
ngOnInit() {
// this.someComp.nativeElement? <-- how to get nativeElement?
}

Причина, по которой я пытаюсь сделать это, заключается в том, чтобы сфокусировать представление на этом дочернем компоненте путем автоматической прокрутки до позиции этого дочернего компонента с использованием функции scrollTo HTMLElement. (См. Как прокрутить элемент в поле зрения при нажатии на него)

Я могу добиться этого, указав идентификатор этому дочернему компоненту и получив его с помощью document.getElementById (), но мне интересно, есть ли способ сделать это с помощью ссылочной переменной шаблона или любого углового способа.

Заранее спасибо!


person Dangular    schedule 18.05.2017    source источник
comment
как это @ViewChild('someComp', {read: ElementRef}) someComp;?   -  person Max Koretskyi    schedule 18.05.2017
comment
@Maximus именно то, что я искал! Можете ли вы написать свой ответ на этот вопрос, чтобы я мог отметить его как ответ на этот вопрос? Это наверняка поможет большему количеству людей, столкнувшихся с той же проблемой :)   -  person Dangular    schedule 19.05.2017
comment
да конечно сделано   -  person Max Koretskyi    schedule 19.05.2017


Ответы (1)


Декоратор @ViewChild может запрашивать несколько разных типов, которые можно указать с помощью параметра read:

@ViewChild(selector, {read: Type}) property;

Эти типы могут быть:

  • ElementRef

    @ViewChild('someComp', {read: ElementRef}) someComp;

  • ViewContainerRef

    @ViewChild('someComp', {read: ViewContainerRef}) someComp;

В вашем случае это ElementRef, что вам нужно.

person Max Koretskyi    schedule 19.05.2017