Intro.js在mat-card组件内元素选择失效无法高亮如何解决？

你遇到的问题核心是DOM元素获取时机不对，Angular组件及第三方组件（如你用到的Angular Material组件）的渲染是异步的，如果你在组件初始化阶段就调用Intro.js的start方法，此时目标元素还没有挂载到DOM树上，Intro.js无法找到对应元素，自然就无法高亮，引导框只会显示在页面中央。

解决步骤 #

1. 调整初始化时机
   将Intro.js的初始化逻辑放到ngAfterViewInit生命周期钩子中执行，该钩子会在Angular完成所有组件视图、子组件的渲染后触发，此时才能保证你要选中的元素已经存在于DOM中。

2. 使用Angular推荐的方式获取DOM元素
   不要直接用原生的document.getElementById、document.querySelector方法，改用@ViewChild模板引用的方式获取元素，避免直接操作DOM导致的适配问题。

3. 动态渲染元素适配
   如果你的目标元素是通过*ngIf、*ngFor这类结构指令动态渲染的（比如依赖接口返回数据才显示的内容），需要等元素渲染完成后，调用Intro.js的refresh()方法更新步骤配置，再继续引导流程。

修改后代码示例 #

组件TS代码

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import introJs from 'intro.js';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  // 通过模板引用获取对应DOM元素
  @ViewChild('step3') step3El: ElementRef;
  @ViewChild('step4') step4El: ElementRef;

  ngAfterViewInit(): void {
    // 视图渲染完成后再初始化引导
    introJs().setOptions({
      tooltipClass: 'customTooltip',
      highlightClass: 'customHighlight',
      exitOnOverlayClick: false,
      disableInteraction: false,
      steps: [
        {
          intro: '欢迎使用本系统，我来带你快速了解功能！',
        },
        {
          element: '#step2',
          intro: '点击回到首页',
          position: 'right'
        },
        {
          element: this.step3El.nativeElement,
          intro: '请填写表单内容',
          position: 'right'
        },
        {
          element: this.step4El.nativeElement,
          intro: '点击创建账号',
          position: 'right'
        }
      ]
    }).start();
  }
}

页面HTML代码

<!-- 首页按钮示例，对应step2 -->
<button mat-button id="step2" routerLink="/home">首页</button>

<div>
  <mat-card>
    <mat-card-content>
      <!-- 新增模板引用#step3供@ViewChild获取 -->
      <form #step3 id="step3" [formGroup]="testForm">
        <h3>测试</h3>
          <mat-form-field appearance="outline">
            <mat-label>标签</mat-label>
            <mat-select formControlName="role">
              <mat-option>1</mat-option>
            </mat-select>
          </mat-form-field>
      </form>
    </mat-card-content>
  </mat-card>
</div>

<!-- 创建账号按钮示例，对应step4 -->
<button mat-raised-button #step4 color="primary">创建账号</button>

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