获取条件元素自动滚动到视图的最佳方法

Question

我有一个用*ngIf条件有条件插入的元素。插入后，我想将其滚动到视图中。以下技术有效，但看起来笨拙，我想对其进行改进。

          <app-text-create id="textcreate" *ngIf="modeNewEntry"          
                  (load)="document.getElementById('textcreate').scrollIntoView()"
          ></app-text-create>

当组件状态属性modeNewEntry变为true时，文本输入框将插入页面底部。如果没有scrollIntoView()调用，则通常不可见。

是否有比HTMLElement表达式更好的访问document.getElementById(..)的方法？

PS。我正在使用的IDE WebStorm认为document引用是未定义的，即使这确实可行。那是错误还是有原因？

Answer 1

在包装div中添加组件：

<div #textCreate>
  <app-text-create id="textcreate" *ngIf="modeNewEntry">
  </app-text-create>
</div>

然后，当您单击按钮以将modeNewEntry设置为true时，还为此scrollIntoView()在ElementRef的{​​{1}}上调用nativeElement：< / p>

div

---

  

以下是Working Code Demo?供您参考。