Angular Goto锚定在嵌套容器中，具有溢出自动

从技术上讲，由于它在滚动容器中，因此它在视图端口中仍然可见，因此片段无法正常工作，如果您删除高度并滚动css，那么滚动将正常工作，对于这种情况，我们必须在元素的视图子项上使用scrollIntoView函数，以滚动到该元素，下面的工作示例

完整代码:完整代码:

import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  InMemoryScrollingFeature,
  InMemoryScrollingOptions,
  provideRouter,
  Route,
  RouterModule,
  withComponentInputBinding,
  withInMemoryScrolling,
} from '@angular/router';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <h1>Hello from {{ name }}!</h1>

<a (click)="clickEvent()" routerLink="./" > go to anchor </a>

<div class="scroll-container">
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>

  <div id="goto" #goto>lorem ipsum to goto</div>
</div>
  `,
  styles: `
  .scroll-container {
    height: 200px;
    overflow-y: auto;
  }

  #goto {
    background: red;
  }
  `,
})
export class App {
  name = 'Angular';
  @ViewChild('goto') goto!: ElementRef<any>;

  clickEvent() {
    if (this.goto?.nativeElement) {
      this.goto.nativeElement.scrollIntoView();
    }
  }
}

const APP_ROUTES: Route[] = [
  {
    path: '',
    redirectTo: 'sample-1',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'sample-1',
  },
];

const scrollConfig: InMemoryScrollingOptions = {
  scrollPositionRestoration: 'top',
  anchorScrolling: 'enabled',
};

const inMemoryScrollingFeature: InMemoryScrollingFeature =
  withInMemoryScrolling(scrollConfig);

bootstrapApplication(App, {
  providers: [
    provideRouter(
      APP_ROUTES,
      withComponentInputBinding(),
      inMemoryScrollingFeature
    ),
  ],
});

Stackblitz Demo