Angular：如何在模板内直接传递元素引用实现滚动？

要跳过@ViewChild，直接在模板中传递元素引用并实现滚动，只需要以下几步：

1. 给目标区域添加模板引用变量 #

在需要滚动到的元素上添加模板引用变量（以#开头），比如：

<!-- 历史板块 -->
<section #history>
  <h2>公司历史</h2>
  <!-- 内容省略 -->
</section>

<!-- 团队板块 -->
<section #team>
  <h2>核心团队</h2>
  <!-- 内容省略 -->
</section>

2. 按钮点击时传递模板引用 #

在导航按钮的click事件中，直接传入对应的模板引用变量：

<nav>
  <button (click)="scrollToSection(history)">公司历史</button>
  <button (click)="scrollToSection(team)">核心团队</button>
</nav>

3. 组件方法中直接操作原生元素 #

在组件类中，接收ElementRef类型的参数，直接通过nativeElement调用滚动方法：

scrollToSection(el: ElementRef): void {
  // 调用原生滚动方法，可选平滑滚动效果
  el.nativeElement.scrollIntoView({
    behavior: 'smooth',
    block: 'start' // 滚动到元素顶部，可选值还有'center'/'end'
  });
}

问题原因说明 #

你之前传递的history是组件类中的同名属性（而非模板引用），所以控制台输出的是组件类的上下文对象。只要确保模板中传递的是模板引用变量（而非组件类属性），就能直接拿到对应的元素引用。

注意事项 #

• 模板引用变量名（#history、#team）要保证在当前模板中唯一，避免命名冲突
• 如果不需要平滑滚动，可去掉behavior: 'smooth'参数，使用默认的即时滚动
• 无需额外声明@ViewChild，完全通过模板传递引用即可实现需求

内容的提问来源于stack exchange，提问作者Chris Barr