如何在滚动时自动改变角度路径

Question

我正在使用 Angular 17，我想制作一个包含多个组件的页面，但每个组件都可以通过路径访问（当单击导航菜单时，它会自动滚动到那里并更改该特定组件的路径）[参见上图]

但是当手动滚动时，我也希望它能够被应用程序检测到，并根据所显示的组件自动将路径更改为正确的路径

Answer 1

由于您想指向页面内的特定位置，我认为您应该使用 fragments 而不是路径。

In computer hypertext, a URI fragment is a string of characters that refers to a resource that is subordinate to another, primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.

The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document. The generic syntax is specified in RFC 3986.[1] The hash mark separator in URIs is not part of the fragment identifier.

您可以使用 Intersection Observer 来检测组件何时位于视口内以及片段何时应更改。然后使用路由器导航方法的NavigationExtras来更改片段。

导航代码应类似于：

this.router.navigate(['.'], {
  fragment: 'about-me'
});