为什么 Intro js 元素选择在垫卡中不起作用

Question

我创建了一个游览，向元素添加了步骤和 ID。但是 嵌套在 中的元素， 是一个 angular 组件 或 来自用于 angular不会高亮.

这是我的行程：

this.introJS.setOptions({
      tooltipClass: 'customTooltip',
      highlightClass: 'customHighlight',
      exitOnOverlayClick: false,
      disableInteraction: false,
      steps: [
        {
          intro: 'Welcome to the web let me show you around!',
        },
        {
          element: '#step2',
          intro: 'Go to Home',
          position: 'right'
        },
        {
          element: document.getElementById('step3'),
          intro: 'Fill out the form',
          position: 'right'
        },
        {
          element: document.querySelector('#step4'),
          intro: 'Click Create an account',
          position: 'right'
        }
      ]
    }).start();

这是html:

<div>
  <mat-card>
    <mat-card-content>
      <form id="step3" [formGroup]="testForm">
        <h3>test</h3>
          <mat-form-field appearance="outline">
            <mat-label>label</mat-label>
            <mat-select formControlName="role">
              <mat-option>1</mat-option>
            </mat-select>
          </mat-form-field>
      </form>
    </mat-card-content>
  </mat-card>
</div>

提示如下所示：

它在中间，没有突出显示任何东西

编辑：如果 CyC0der 的回答是正确的，那么我在使用 ngnIntroService 时遇到了问题。我似乎无法正确包含它。我为那个问题创建了另一个问题 here.

Answer 1

你应该使用 [Angular Intro.js] 而不是常规的 intro.js

添加 CSS / JS of angular-intro 到你的项目后

将 ngIntroService 添加到您的控制器中

可以添加这样的选项

<div ng-controller="MyController"
     ng-intro-options="IntroOptions"
     ng-intro-method="CallMe" ...

或

var introOptions = {};
ngIntroService.clear();
ngIntroService.setOptions(introOptions);

到您的控制器

$scope.IntroOptions = {
steps:[
{
    element: '#step1',
    intro: "First tooltip"
},
{
    element: '#step4',
    intro: "Second tooltip",
    position: 'right'
},
...

Answer 2

我尝试通过集成 intro.js into an angular application. And I am able to make it work properly. check here: https://stackblitz.com/edit/angular-ivy-ylv4c2

来重现该问题

以下是上述 stackblitz 示例的亮点。

我对所有元素都使用了 ID 属性。
<mat-card class="example-card" id="step1">

我在 ngAfterViewInit() 生命周期挂钩中调用了 introJs() 函数，以便 introJs 可以正确地找到运行介绍所需的所有元素。

ngAfterViewInit(): void {
   this.initIntroJs();
}

initIntroJs(): void {
    introJs()
      .setOptions({
        tooltipClass: 'customTooltip',
        highlightClass: 'customHighlight',
        exitOnOverlayClick: false,
        disableInteraction: false,
        steps: [
          {
            intro: 'Welcome to the web let me show you around!'
          },
          {
            element: document.getElementById('step1'),
            intro: 'Material Card Component',
            position: 'right'
          },
          {
            element: document.getElementById('step2'),
            intro: 'Material Grid Component',
            position: 'right'
          },
          {
            element: document.getElementById('step3'),
            intro: 'Material Button Component',
            position: 'right'
          }
        ]
      })
      .start();
  }

所以我认为这是一个简单的解决方案。您一定在集成过程中遗漏了任何东西。你可以看看我的解决方案，如果它对你有用，请在评论中告诉我。

为什么 Intro js 元素选择在垫卡中不起作用

Why does Intro js element selection not work in mat card

typescript

intro.js

angular