如何整合引导-旅游到角应用？

Question

我试图在我的角度应用程序中使用自举旅游，所以我将它添加到了我的包中：

   //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 ERROR TypeError:无法读取Tour._showPopoverAndOverlay上未定义的属性的“背景”

对如何解决它有什么想法吗？

Answer 1

你遇到的问题是，来自引导-旅游包的旅游类，在打字稿中并不清楚。你要做的是：

在组件内部，

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.init()之前调用this.tour.start()。

请注意，this.tour是一个组件类变量，声明为：

tour: any;

我已经测试这是很好的引导-旅游版本0.12.0和角形版本6.0.0。对于任何角度版本>2，它都应该工作得很好。

如果你有什么问题就问吧。

Answer 2

Niz是正确的，但是还有一个要添加的重要注意事项就是不要将引导-独立文件导入组件中。我是这样做的，并且把它放在.angular-cli.json文件中的包中，但是它没有正常工作。

我猜既然它在组件中找到了一个旅游引用，那么

this._ngZone.runOutsideAngular

其实什么都没做。