Question

我正在Angular 7中使用introJS。我具有以下设置选项：

introJS = introJs();

this.introJS.setOptions({
          tooltipPosition: 'auto',
          positionPrecedence: ['left', 'right', 'top', 'bottom'],
          showBullets: true,
          showStepNumbers:true,
          steps: [
            {
              element: '#step1',
              intro: "This is step1."
            },
            {
              element: '#step2',
              intro: "This is step 2, but is hidden in DOM."
            },
            {
              element: '#step3',
              intro: "This is step3, but it does not exist in DOM."
            },
            {
              element: '#step4',
              intro: "This is step 4",
            }
          ]
        });

        this.introJS.start();

此步骤选项是静态的，并且这些步骤可能是隐藏的，或者在DOM中不存在。在这种情况下，如果具有该ID的DOM元素不可见或在DOM中不存在，我希望本行程忽略这些步骤并继续前进。

为此，我遇到了JQuery alternative，但不知道如何针对Angular进行调整。

Answer 1

您可以使用document.querySelector来检查元素是否在DOM中。

var steps = [
  {
    element: '#step1',
    intro: "This is step1."
  },
  {
    element: '#step2',
    intro: "This is step 2, but is hidden in DOM."
  },
  {
    element: '#step3',
    intro: "This is step3, but it does not exist in DOM."
  },
  {
    element: '#step4',
    intro: "This is step 4",
  }
].filter(function (obj) {
  return document.querySelector(obj.element) !== null;
});

console.log(steps);

<div id="step1"></div>

<div id="step2"></div>

<div id="step4"></div>

Answer 2

@pindev答案将不允许未附加到页面元素的步骤。即这是一般步骤，显示在页面中央。将step.element属性设置为null将实现此目的。这对我来说可以过滤掉隐藏了html元素的步骤。

var steps = steps.filter(function (obj) {   // filter out any steps for hidden elements
    var useElement = true;

    if (obj.element !== null) {
        if ($(obj.element).is(':visible') === false) {
            useElement = false;
        }
    }

    return useElement;
});

introJS-忽略不存在的隐藏或DOM元素

2 个答案: