Question

我的HTML中有一个ID为Dim com As New SqlCommand("Select * from Products where datediff(second,FinishedDate, GETDATE())<7 order by ID desc", Connection) Dim ad As New SqlDataAdapter(com) Dim tableTimer As New DataTable() ad.Fill(tableTimer) If tableTimer.Rows.Count = 0 Then Return End If NewID = tableTimer.Rows.Item(0)("ID") If LastID <> NewID Then Dim Tittle As String = tableTimer.Rows.Item(0)("Operator").ToString & ", " & tableTimer.Rows.Item(0)("FinishedDate").ToString Dim text As String = tableTimer.Rows.Item(0)("Customer").ToString & ", " & tableTimer.Rows.Item(0)("WorkID").ToString & vbNewLine & tableTimer.Rows.Item(0)("Product").ToString & ", " & tableTimer.Rows.Item(0)("Operation").ToString LastID = NewID Notification.Show(Me, info.Caption = Tittle, info.Text = text) End If End Sub的DIV。

我的组件中具有以下TypeScript：

footerWrapperTop

但是，在运行时页面不会向下滚动到页脚。我在做什么错了？

如果我ngAfterViewInit(): void { try { this.sFragment = 'footerWrapperTop'; const nativeElement = document.querySelector('#' + this.sFragment); nativeElement.scrollIntoView(); } catch (e) { } }会在控制台中显示DIV。

Answer 1

您可以使用 Angular的渲染器

根据Angular's Official Documentation为selectRootElement提供一个第二个参数，因为它用于保存您的内容

语法： MustBeFirst

已经创建了一个Stackblitz Demo供您参考

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

Answer 2

请检查以下问题：How to call scrollIntoView on an element in angular 2+

首先在元素（#footerWrapperTop）中添加模板参考变量：

<div #footerWrapperTop></div>

在component.ts中：

export class MyComponent {
  @ViewChild("footerWrapperTop") MyProp: ElementRef;

  ngAfterViewInit() {
    this.MyProp.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
  }
}

但是，当路由器更改时，角度5及更低版本中存在错误。 Angular 6解决了该问题。检查以下问题：https://github.com/angular/angular/issues/7791

Angular 2 scrollIntoView不滚动

2 个答案: