web-dev-qa-db-ja.com

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?
}

これを実行しようとしている理由は、HTMLElementのscrollTo関数を使用して、子コンポーネントの位置に自動スクロールすることにより、ビューをその子コンポーネントにフォーカスするためです（ を参照してください）。クリックされたときに要素をスクロールして表示する ）

私はその子コンポーネントにidを与え、document.getElementById（）を使用して取得することでそれを達成できますが、テンプレート参照変数またはangular方法を使用してこれを行う方法があるかどうか疑問に思っています。

前もって感謝します！

angulardomautoscrollviewchild
10
Dangular

_@ViewChild_デコレーターは、readパラメーターを使用して指定できるいくつかの異なるタイプを照会できます。

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

これらのタイプは次のとおりです。

  • ElementRef

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

  • ViewContainerRef

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

あなたの場合、あなたが望むのはElementRefです。

16
Maxim Koretskyi