Question

我正在尝试将bootstrap-tour用于我的角度应用，所以我已将其添加到我的捆绑包中：

   //css
   "../node_modules/bootstrap-tour/build/css/bootstrap-tour-standalone.css"

   //js  
   "../node_modules/bootstrap-tour/build/js/bootstrap-tour-standalone.js"

然后在我的组件中，我试着做一个简单的游览：

     ngAfterViewInit() {
       let tour = new Tour({
       name:'tour',
       template: `<div>
           <h3>Test</h3>
         </div>`,
       steps: [
        {
            element: "#test",
            title: "Title of my step",
            content: "Content of my step"
        }
      ]
     });           

      tour.init();
      tour.start();
   }

但在我的控制台上我收到错误： vendor.bundle.js：149550错误TypeError：无法读取undefined属性'backdrop' 在Tour._showPopoverAndOverlay

关于如何解决它的任何想法？

Answer 1

你遇到的问题是来自bootstrap-tour包的Tour类对于打字稿是不知道的。你需要做什么：

在组件内部，

declare var Tour: any;

然后是ngAfterViewInit（）部分，进行初始化：

this._ngZone.runOutsideAngular(() => {
    this.tour = new Tour({                           
        debug: true,
        storage: false,                        
        backdrop: true,
    });
    this.tour.addStep({
        element: ".tour-nav-1",
        title: "Title of my step 1",
        content: "Content of my step 1",
        placement: 'bottom',
        backdrop: true,
    });
    this.tour.addStep({
        element: ".tour-nav-2",
        title: "Title of my step 2",
        content: "Content of my step 2",
        placement: 'bottom',
    });
    // Initialize the tour
    this.tour.init();
});

瞧，瞧，你们都准备好了。请注意，this._ngZone是ng区域，您可以在组件的构造函数中实例化，如下所示：

constructor(private _ngZone: NgZone) {}

然后您可以运行

this.tour.start(true);

命令在组件内的任何地方开始游览，只需确保在this.tour.start（）之前调用this.tour.init（）。

请注意，this.tour是一个声明为：

的组件类变量

tour: any;

我已经测试过这个可以正常使用bootstrap-tour版本0.12.0和角度版本6.0.0。它应该适用于任何角度版本＆gt; 2

如果您有任何疑问，请询问。

Answer 2

Niz是正确的，但要添加的一个重要说明是不要将引导独立文件导入组件。我正在这样做，并将其也放在.angular-cli.json文件的捆绑包中，并且工作不正常。

我猜是因为它在组件内部找到了Tour的引用，所以

this._ngZone.runOutsideAngular

实际上没有做任何事情。

如何将bootstrap-tour集成到angular app？

2 个答案: