外部JavaScript不起作用的路由器变化

Question

我正在使用Angular中的资产/JS/Script.js文件中的外部JavaScript来启用默认情况下禁用的按钮。但是，它仅在到另一个组件的路由下的第一页上工作，然后回到手表页面上，JavaScript未加载。在我的代码下面检查下方。

我的.ts文件

     ngOnInit() {
    // bug fix due js only working on refresh
    this.loadScript('assets/js/script.js');

    this.token = localStorage.getItem('token');
    this.users = this.Token.payload(this.token);
    this.username = this.users.data.name;
    this.email = this.users.data.email;

    this.videoid = this.getVideoId();
    // console.log(this.video);

    // get video by id sent from on click
    this.jarwis.watch({ 'video_id': this.videoid }).subscribe((res: any) => {
      this.video = res['video'];
    });
  }

  // load js file in components
  loadScript(url: string) {
    const body = <HTMLDivElement>document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }

watch.html代码

      <video controls class="video" id="video" *ngIf="video.video !== '/lessons/'">
    <source src="https://testing.co.za/Backend/{{ video.video }}" type="video/mp4" />
      </video>

      <div class="buttons" *ngIf="video.video !== '/lessons/'">
        <div class="mybuttons">
          <button type="button" class="btn btn-secondary next" id="quizBtn" (click)="quiz(video.name)" disabled>
            <span class="ti-agenda"></span>
            QUIZ
          </button>
        </div>

        <div class="divider"></div>

        <div class="mybuttons">
          <button type="button" class="btn btn-secondary next" id="bookBtn" (click)="book(video.subtopic)" disabled>
            <span class="ti-calendar"></span>
            Book Tutor
          </button>
        </div>

      </div>

我的脚本。

 window.onload = function () {
  el = document.getElementById("video");

  if (el) {
    el.addEventListener("ended", videoEndHandler, false);
  }
};

function videoEndHandler(e) {
  document.getElementById("quizBtn").disabled = false;
  document.getElementById("bookBtn").disabled = false;
}

我的

Answer 1

l设法找到答案，以防万一有人面临同一问题。答案如下，您只需更改HTML和脚本即可。

我的.html文件

  <!-- put autoplay back -->
  <video playsinline controls onended="showUpNext()" class="video" id="video" *ngIf="video.video !== '/lessons/'">
    <source src="https://eworksa.co.za/Backend/{{ video.video }}" type="video/mp4" />
  </video>

 <!---Show these buttons if it is a video-->
      <div class="buttons" *ngIf="video.video !== '/lessons/'">
        <div class="mybuttons">
          <button type="button" class="btn btn-secondary" id="quizBtn" (click)="quiz(video.name)" disabled>
            <span class="ti-agenda"></span>
            QUIZ
          </button>
        </div>

        <div class="divider"></div>

        <div class="mybuttons">
          <button type="button" class="btn btn-secondary next" id="bookBtn" (click)="book(video.subtopic)" disabled>
            <span class="ti-calendar"></span>
            Book Tutor
          </button>
        </div>

      </div>

我的脚本。

   function showUpNext() {
  $("button").removeAttr("disabled");
}