web-dev-qa-db-ja.com

レンダラーは、 `invokeElementMethod`の代替となるrenderer2の支持として非推奨になりましたか？

私のサイドプロジェクトでは、新しいメッセージが下部に追加され、ウィンドウが下部にスクロールして最新のメッセージを表示するチャットストリームを実装したいと考えています。

そのために、コンポーネントでViewChildrenを使用して最後のメッセージ（最新）を検索し、scrollIntoViewでnativeElementを使用することを選択しました。

DOM APIに直接アクセスしてメソッドを呼び出さないようにするためにnativeElement.scrollIntoView()。 renderer.invokeElementMethod(nativeElement, 'scrollIntoView')を使用する必要があると思います。

問題はrendererが廃止されてrenderer2になり、renderer2でメソッドinvokeElementMethodの代替案を見つけることができないようです。

質問は、それを行うrenderer2で見逃した方法はありますか？それとも、要素メソッドを呼び出す新しい方法がありますか？

javascriptangulartypescriptrenderer
15
endyjasmi

selectRootElementメソッドのRenderer2を使用できます。

例えば：

_constructor(private renderer: Renderer2) {}

this.renderer.selectRootElement('#domElementId').scrollIntoView()
_

ここで、domElementIdは、HTML内のid = 'domElementId'です

[〜＃〜]更新[〜＃〜]

selectRootElementの2番目の引数を指定します Angularの公式ドキュメント そのままコンテンツの保存に使用されます

selectRootElement(selectorOrNode: any, preserveContent?: boolean): any

_this.renderer
  .selectRootElement'#domElementId', true)  // Supply true for the 2nd arg to make sure your content is preserved.
  .scrollIntoView()                      // Or ({ behavior: 'smooth' }) for smooth scrolling
_
14
seytzhan