Angular如何实现从一个组件跳转至另一组件的指定区域？

1. 配置路由开启锚点滚动 #

打开你的app-routing.module.ts文件，修改RouterModule的全局配置，开启锚点滚动功能：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled', // 开启锚点自动滚动
      scrollOffset: [0, 60] // 可选配置，页面顶部有固定导航栏时设置偏移量，避免目标区域被导航遮挡
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果你不想开启全局锚点滚动，也可以跳过这步，后续在组件B中手动实现滚动逻辑。

2. 调整组件A的跳转逻辑 #

你要跳转的目标区域元素id为dropdownForm1，直接将fragment参数和目标id保持一致即可：

abc(){
  alert('please login')
  this.router.navigate(['/componentB'],{fragment:'dropdownForm1'});
}

3. 修复组件B的相关代码 #

首先注意：<ng-template>是Angular的模板元素，本身不会被渲染到真实DOM树中，不要把锚点id写在<ng-template>标签上，同时要确保你的#notLogged模板是被正常渲染的（比如通过*ngTemplateOutlet或者*ngIf调用渲染）。

如果需要跳转后自动打开登录下拉框，可以做如下扩展：
首先给ngbDropdown添加模板引用：

<div ngbDropdown class="d-inline-block" #loginDropdown="ngbDropdown">
  <a class="nav-link dropdown-toggle" id="dropdownForm1" role="button" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
    <i class="fas fa fa-user"></i> Login
  </a>
  <!-- 其余原有代码保持不变 -->
</div>

然后在组件B的ts文件中监听路由fragment变化，执行对应操作：

import { ActivatedRoute } from '@angular/router';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
import { ViewChild } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class ComponentB {
  @ViewChild('loginDropdown') loginDropdown!: NgbDropdown;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.fragment.subscribe(fragment => {
      if (fragment === 'dropdownForm1') {
        setTimeout(() => {
          // 手动滚动到目标区域，不需要自动滚动可以删除这行
          document.getElementById(fragment)?.scrollIntoView({behavior: 'smooth'});
          // 自动打开下拉框，不需要可以删除这行
          this.loginDropdown?.open();
        }, 100);
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者An student