如何在Angular 12+项目中使用Pendo自定义引导推进功能

你提供的代码属于Pendo引导的步骤级自定义钩子，有两种部署方式可选：

方式一：直接在Pendo后台配置（无需修改Angular业务代码，推荐） #

这是最简便的生效方式，操作步骤如下：

• 登录Pendo管理后台，找到你要调整的指定引导教程，进入引导编辑页
• 选中需要添加「全局点击推进」逻辑的步骤，找到页面中的*高级（Advanced）*标签页
• 在标签页下的*自定义代码（Custom Code）*输入框中，直接粘贴你找到的这段JS代码
• 保存引导配置并重新发布，即可直接对所有访问用户生效，不需要改动Angular项目代码

方式二：集成到Angular项目代码中统一管理 #

如果你希望把逻辑管控在项目代码里，不需要每次改后台配置，可以按以下步骤操作：

• 找到你项目中Pendo的初始化位置，通常是在app.component.ts的ngOnInit生命周期钩子，或者你单独封装的Pendo初始化服务中
• 注册Pendo全局的guide:step:activate事件监听，在步骤激活时注入你的自定义逻辑，参考代码如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 先判断全局pendo对象是否已加载完成
    if (window.pendo) {
      this.registerPendoCustomAdvance();
    } else {
      // 等待pendo加载完成后再注册逻辑
      const pendoLoadCheck = setInterval(() => {
        if (window.pendo) {
          clearInterval(pendoLoadCheck);
          this.registerPendoCustomAdvance();
        }
      }, 500);
    }
  }

  private registerPendoCustomAdvance(): void {
    window.pendo.on('guide:step:activate', (step) => {
      // 可以在这里加判断，只对你指定的引导ID/步骤ID生效
      // if (step.guide.id !== '你要生效的引导ID') return;
      
      const dom = window.pendo.dom;
      const guide = step.guide;
      if (!step) return;
      const nextStep = guide.steps[guide.getPositionOfStep(step)];
      const advanceOnce = window.pendo._.once(window.pendo.onGuideAdvanced);

      function checkForElementAndAdvance(e) {
        const checkForNextElement = setInterval(function () {
          if (dom(nextStep.elementPathRule).length) {
            advanceOnce();
            clearInterval(checkForNextElement);
          }
        }, 1000);
      }

      window.pendo.attachEvent(document, 'click', checkForElementAndAdvance);
      step.after('teardown', function () {
        window.pendo.detachEvent(document, 'click', checkForElementAndAdvance);
      });
    });
  }
}

• 如果是TypeScript项目中提示window上不存在pendo属性，可以在src目录下的global.d.ts类型定义文件中添加声明：

declare interface Window {
  pendo: any;
}

注意事项 #

• 如果你只需要对特定引导生效，可以在事件监听逻辑里添加引导ID/步骤ID的判断，避免所有引导都触发这个逻辑
• 测试时注意清理浏览器缓存，避免旧的引导配置残留导致逻辑不生效

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