Angular2如何在使用路线的组件之间进行更改时再次使javascript加载 [英] Angular2 how to make javascript load again when change between component using routes

问题描述

我已经导入了一些JavaScript，并将它们放在'angular-cli.json'中，如下所示:

I have imported some javascript, and put them in 'angular-cli.json', the code like below:

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": "assets",
  "index": "index.html",
  "main": "main.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "prefix": "app",
  "mobile": false,
  "styles": [
    "style/styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "style/AdminLTE.css",
    "../node_modules/ionicons/css/ionicons.min.css",
    "style/_all-skins.min.css",
    "../node_modules/bootstrap-select/dist/css/bootstrap-select.min.css",
    "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
    "../node_modules/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css",
    "../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css"

  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "script/app.min.js",
    //===========================
    "../node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
    //===========================
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
    "../node_modules/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js",
    "../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js",
    "script/for_new_push.js"
  ],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

就像js在"=============="之间导入的js一样，它将在刷新页面时执行，并使用类"selectpicker"(如下所示的html)解决选择问题组件:

like the js imported "bootstrap-select.min.js" between "=============", it will execute when refresh the page, tackle the select with class "selectpicker"(html like below) in one component:

<select class="selectpicker" >
     <option selected>所有店</option>
     <option>1</option>
     <option>2</option>
     <option>3</option>
</select>

选择项正常显示，但是如果我从另一个组件移至该组件，则选择项将无法正常显示.那是因为javascript在刷新页面时只能工作一次，如果DOM在此之后生成，则DOM将不会被激活.

the select display normally, but if i move to this component from another component, the select won't display normally. That's for the javascript only work once when refresh the page, if the DOM generate after that, the DOM won't be activated.

一种方法是在component.ts中使用下面的代码.每次加载此组件时，都会激活".selectpicker".

One method is use the code below in it's component.ts. This, every time load this component, will active the ".selectpicker".

ngOnInit(){ jQuery($('.selectpicker').selectpicker()'; }

但是我不确定这是一个好方法，所以我想知道有更好的解决方案来解决这个问题.

But I am not sure this is a good method, so I wonder more better solution to solve this problem.

推荐答案

当前，当导航仅更改路线参数时，无法使Angular2路由器重新创建组件.有计划支持这一点.

Currently there is no way to make the Angular2 router recreate the component when the navigation only changes a route parameter. There are plans to support that.

您可以通过订阅路由参数更改并在那里执行代码来解决此问题

You can work around by subscribing to route parameter changes and execute the code there

constructor(private route:ActivatedRoute) {}

ngOnInit() {
  route.params.subscribe(p => {
    this.myInit(); // successive params changes
  });
  this.myInit(); // first time
}

myInit() {
  jQuery($('.selectpicker').selectpicker()';
}

这篇关于Angular2如何在使用路线的组件之间进行更改时再次使javascript加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！