Clever Geek Handbook

Angular2 how to make JavaScript load again on change between components using routes

I imported some javascript and put them in 'angular-cli.json'

, the code is 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"
  }
}

as imported js "bootstrap-select.min.js"

between "==============", it will be executed on page refresh, allow the selection with a class "selectpicker"

(html as below) in one component:

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

the selection display is ok, but if I navigate to that component from another component, the selection doesn't display normally. That for javascript only works once on page refresh, if the DOM generates after that the DOM will not be activated.

One method is to use the code below in component.ts. This, every time this component is loaded, will activate ".selectpicker"

.

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

But I'm not sure if this is a good method, so I'm wondering how best to solve this problem.

+1


source to share


1 answer


There is currently no way for the Angular2 router to recreate the component when the navigation only changes the route parameter. There are plans to support this.

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



constructor(private route:ActivatedRoute) {}

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

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


source






More articles:


All Articles