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

Question

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.

Is the route change only changing a parameter value or navigating to a different route? — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 25, 2016 at 8:51
@GünterZöchbauer I only have one page, one route contains several components. thanks for the rapid reply — JACK
– JACK, Commented Oct 25, 2016 at 9:33

Günter Zöchbauer · Accepted Answer · 2016-10-25 09:36:57Z

1

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

answered Oct 25, 2016 at 9:36

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JACK Over a year ago

thanks! Really good suggestion! I thinks you have super knowledge about anjular2, know what they are plan to do.

Günter Zöchbauer Over a year ago

I used to follow all comments on Angular2 issues but got a bit out of sync lately. This was the comment github.com/angular/angular/issues/7757#issuecomment-236737846

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related