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"
  }
}

就像在============="之间导入bootstrap-select.min.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屋！