Angular Shepherd是否支持路由？请求路由导航实现示例

Angular Shepherd本身没有内置路由跳转配置，但可以结合Angular Router和Shepherd的生命周期钩子实现跨页面引导需求，以下是具体实现示例：

1. 基础依赖与注入 #

确保项目已安装Angular Router和Angular Shepherd，在你的引导服务/组件中注入两个核心服务：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { ShepherdService } from 'angular-shepherd';

@Injectable({ providedIn: 'root' })
export class TourService {
  constructor(private router: Router, private shepherdService: ShepherdService) {}
}

2. 定义带路由跳转的引导步骤 #

利用beforeShowPromise钩子，在步骤显示前完成路由跳转，等待页面加载后再渲染当前步骤：

startTour() {
  const tourSteps = [
    {
      id: 'home-step',
      text: ['这是首页的引导内容'],
      attachTo: { element: '#home-target', on: 'bottom' },
      buttons: [
        {
          action: () => this.shepherdService.next(),
          text: '下一步'
        }
      ]
    },
    {
      id: 'user-step',
      text: ['这是用户页的引导内容'],
      attachTo: { element: '#user-target', on: 'right' },
      // 跳转路由并等待页面加载完成
      beforeShowPromise: () => {
        return this.router.navigate(['/user']).then(() => {
          // 短暂延迟确保DOM元素渲染完成，可根据实际调整时长
          return new Promise(resolve => setTimeout(resolve, 300));
        });
      },
      buttons: [
        {
          action: () => this.shepherdService.back(),
          text: '上一步'
        },
        {
          action: () => this.shepherdService.complete(),
          text: '完成'
        }
      ]
    }
  ];

  this.shepherdService.defaultStepOptions = {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  };

  this.shepherdService.start(tourSteps);
}

3. 目标页面的步骤适配 #

在跳转后的目标页面（如/user页面组件）中，确保引导目标元素存在，并在视图初始化后触发步骤显示：

import { Component, AfterViewInit } from '@angular/core';
import { ShepherdService } from 'angular-shepherd';

@Component({
  selector: 'app-user',
  template: '<div id="user-target">用户功能区域</div>'
})
export class UserComponent implements AfterViewInit {
  constructor(private shepherdService: ShepherdService) {}

  ngAfterViewInit() {
    // 检测当前引导的目标步骤，确保元素渲染后显示
    if (this.shepherdService.activeTour?.currentStep?.id === 'user-step') {
      this.shepherdService.show('user-step');
    }
  }
}

关键注意事项 #

• beforeShowPromise是实现跨页面引导的核心，它会等待Promise完成后再渲染步骤，适配路由跳转这类异步操作
• 路由跳转后的延迟可根据页面复杂度调整，也可通过MutationObserver或Angular的ViewChild监听元素状态，替代固定延迟
• 确保每个引导步骤的id唯一，方便在目标页面精准匹配触发

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