单击按钮时 ngx-joyride 不显示

Question

我已经实施 ngx-joyride 用于我网站的演示目的。

但是点击按钮时没有显示任何内容（joyride 是按钮）。

我附上了我的 angular 9 浏览器控制台和网页的屏幕截图，以便您更好地了解。

请帮我解决这个问题。提前致谢。

//Angular 9 code 
import {
  Component,
  OnInit,
  ElementRef,
  ViewChild,
  AfterViewInit,
} from "@angular/core";
import { JoyrideService } from "ngx-joyride";

@Component({
  selector: "app-temporary",
  templateUrl: "./temporary.component.html",
  styleUrls: ["./temporary.component.scss"],
})
export class TemporaryComponent implements OnInit, AfterViewInit {
  constructor(private joyride: JoyrideService) {}

  @ViewChild("ele1", { static: false }) ele1: ElementRef;
  @ViewChild("ele2", { static: false }) ele2: ElementRef;

  ngOnInit(): void {}
  ngAfterViewInit() {
    console.log("1", this.ele1);
    console.log("2", this.ele2);
  }

  //ngx-joyride-tour
  onClick() {
    // alert("coming here 1");

    console.log("joyrideService", this.joyride);
    this.joyride
      .startTour({ steps: ["ONE", "TWO"], logsEnabled: true })
      .subscribe(
        (step) => {
          console.log("coming step section");
          console.log(step);
        },
        (error) => {
          console.log("coming in error section");
        },
        () => {
          console.log("tour finished");
        }
      );
  }
}

<div>
    <button class="btn btn-sm btn-primary" (click)="onClick()">joyride</button>
    <div joyrideStep="ONE" title="Page Title" text="Main title!" #ele1>Text</div>
    <div joyrideStep="TWO" title="Page Title" text="Main title!" #ele2>Div content</div>
</div>
<h1>Temporary PAge</h1>

Answer 1

我们误会了，我们没有在延迟加载的模块中添加 forChild() 的 joyride 模块。

单击按钮时 ngx-joyride 不显示

ngx-joyride not showing when click on button

angular9