javascript - 如果我路由到另一个组件然后返回，Angular-cli 3rd 方 javascript 将停止工作

Question

我正在使用 angular-cli，我正在开发一个组件，该组件需要一些 javascript 在一组 Bootstrap 选项卡 Pane 中移动以创建“向导”效果。如果我直接导​​航到组件(即 http://localhost:4200/bulklabels/new )，javascript 工作得很好。但是，如果我导航到另一个组件(使用导航菜单和路由器导出)然后返回到向导组件，javascript 将停止工作(即我不能再使用下一个/上一个按钮在选项卡 Pane 中移动)。如果我刷新页面，它会再次开始工作。

这是我项目中 ng -v 的输出

@angular/cli: 1.0.5
node: 6.10.3
os: win32 x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.5
@angular/compiler-cli: 4.1.3 

如果相关的话，我也在使用 Bootstrap 4 alpha 6。

我正在从 angular-cli.json 文件的脚本部分加载自定义 javascrpt，如下所示。

  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",          
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "assets/js/site.js"
  ],

site.js 文件是我自定义的 javascript。

这是 site.js 中的自定义 javascript

$(document).ready(function () {

    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);

        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });

    $(".next-step").click(function (e) {

        var $active = $('.nav-tabs li>a.active');
        $active.parent().next().removeClass('disabled');
        nextTab($active);

    });

    $(".prev-step").click(function (e) {

        var $active = $('.nav-tabs li>a.active');
        prevTab($active);

    });
});

function nextTab(elem) {
    $(elem).parent().next().find('a[data-toggle="tab"]').click();
}

function prevTab(elem) {
    $(elem).parent().prev().find('a[data-toggle="tab"]').click();
}

这里是与 javascript 关联的按钮，来自 ...component.html 模板文件

<ul class="list-inline pull-right">
    <li class="list-inline-item">
        <button type="button" class="btn btn-primary prev-step">Previous</button>
    </li>
    <li class="list-inline-item">
        <button type="button" class="btn btn-primary next-step">Next</button>
    </li>
</ul>

这是我的 navbar.component.ts

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

@Component({
  selector: 'masc-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这是我的 navbar.component.html

<div>
    <nav class="navbar navbar-toggleable-sm navbar-inverse cd-navbar-background">

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
          aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand mr-5" href="#">
        <img class="cd-logo-image" alt="Confirm Delivery logo">
      </a>

      <div class="collapse navbar-collapse" id="navbarText">

        <div class="nav bar-nav mr-auto">
          <a class="nav-item nav-link active" href="#"><i class="fa fa-home mr-1" aria-hidden="true"></i>Home<span class="sr-only">(current)</span></a>

          <div class="dropdown">
            <a class="nav-item nav-link dropdown-toggle" href="#" id="navbarTasksDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-gears mr-1" aria-hidden="true"></i>
              Tasks
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarTasksDropdownMenuLink">
              <a class="dropdown-item nav-link"[routerLink]="['bulklabels/about']">Bulk Labels</a>
              <a class="dropdown-item nav-link"[routerLink]="['bulklabels/new']">Create Bulk Label</a>
              <a class="dropdown-item" href="#">Users</a>
            </div>  
          </div>

          <a class="nav-item nav-link" href="#"><i class="fa fa-lock mr-1" aria-hidden="true"></i>Admin</a>


        </div>


        <span class="navbar-text login">
          <a href="#" ><i class="fa fa-user mr-1" aria-hidden="true"></i>Login</a>
        </span>


      </div>
    </nav>
  </div>

这是我的 app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { BulkLabelsComponent } from './bulk-labels/bulk-labels.component';
import { CreateBulkLabelComponent } from './bulk-labels/create-bulk-label/create-bulk-label.component';

const routes: Routes = [
      { path: 'home', component: HomeComponent},
      { path: 'bulklabels/about', component: BulkLabelsComponent},
      { path: 'bulklabels/new', component: CreateBulkLabelComponent},
      { path: '', redirectTo: 'home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在此先感谢您提供的任何帮助。

Answer 1

declare var jQuery: any;
declare var $: any;

将这些声明添加到您的导入中，并将代码添加到您的 OnInit 中的就绪函数中