这里的技巧是让introjs添加到你的组件根目录中，默认情况下intro.js会把div添加到body元素中，所以工具提示不会显示ok。要在home.page.ts上启动intro.js，你必须指定document.querySelector（yourcomponentselector）

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

import * as introJs from 'intro.js/intro.js';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  showHelp(){
    introJs(document.querySelector("app-home")).setOptions({
      'nextLabel': 'Next step',
      'prevLabel': 'Previous step',
      'skipLabel': 'Don\'t bother me!',
      'doneLabel': 'Finish'
    }).start(); 
  }
}

此外，必须覆盖某些离子成分“含量”css属性。

ion-nav,
ion-tab,
ion-tabs,
ion-list {
    contain: none;
}

我在github上传了一个示例项目：https://github.com/konum/ionic4-introjs/

如果（并且只有）您足够勇敢，我为intro.js制作了一个 Package 器包，用作Angular应用程序上的指令。
这是一个私人的（@）包，我为我和我的公司，所以它没有很好地记录在所有，但肯定是维护
https://www.npmjs.com/package/@esfaenza/ngx-introjs
小指南：
1)使用安装程序包

npm install @esfaenza/ngx-introjs

(you应该检查你需要的版本。从Angular 版本8向前我遵循Angular 的版本，从8向下只是尝试最后一个可用的建设）
2)在您的模块中：

import { IntroJsModule } from "@esfaenza/ngx-introjs"
...
@NgModule({
imports: [IntroJsModule, etc...],
declarations: [your stuff],
exports: [your stuff]
})

3)在组件的.ts中定义简介的数据

public const IntroItems = {
'Group': '1',
'1': 'Step 1 description',
'2': 'Step 2 description'
};

4)在HTML中，将该指令附加到需要的位置

[intro]="IntroItems" [Order]="1"

5)要启动演示，请在组件中注入IntroJsService，如下所示：

import { IntroJsService } from "@esfaenza/ngx-introjs";
constructor(public introService: IntroJsService, etc...) { }

6)像这样使用它：

this.introService.start(null, '1');

7)如果要更改intro.js的默认选项，可以使用

this.introService.setOptions(...)

对于那些可能会有这个问题，我找到了另一个替代方案来解决它。

const introInstance = this.introJS.setOptions({
  nextLabel: '<ion-icon name="arrow-forward-outline"></ion-icon>',
  prevLabel: '<ion-icon name="arrow-back-outline"></ion-icon>',
  steps,
});

introInstance.start();

introInstance.onbeforechange((targetElement: HTMLElement) => {
  targetElement.scrollIntoView();
});

使用onbeforechange intro js回调滚动到目标元素。