CODEWITHSUNDEEP
angularangular-cli
JACK
JACK

Reputation: 51

Angular2 how to make javascript load again when change between component using routes

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

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>

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.

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.

Upvotes: 2

Views: 1769

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657516

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()';
}

Upvotes: 1

Related Questions