Angular2 don't load external js file when i change the view

问题

I am still learning Angular 2 so i may be doing something wrong over here. I have a HTML/CSS template and i am trying to make it work with Angular 2. I have created an Angular2 project with few components...

in the app.component.html i have my menu

<ul class="clearfix">
     <li><a [routerLink]="['/']">Home</a></li>
     <li><a [routerLink]="['/link1']">Link1</a></li>
     <li><a [routerLink]="['/link2']">Link2</a> </li>
</ul>

When i click on one item of the menu it changes the view to the component i made for example when i click Link1 it shows me the view of link1 component (link1.component.html) in the index.html i have

<app-root>Loading...</app-root>

and i have loaded all the CSS and JS files, so the problem here when i click on the menu the view change but Angular2 do not load the Javascript that was loaded in index.html it only do that when i put the direct link.

To be more clear if i put the direct link in the browser localhost:4200/link1 the script get loaded and i could see the animation or whatever i have that was loaded in the index.html and was called in link1.component.html but if i am at home and click Link 1 in the menu the view change but the animation or alert... doesn't work.

I don't get any error in the console and in the index.html i am only loading those two scripts

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="/assets/js/site.min.js"></script>

回答1:

You can run the jquery inside one of the lifecycle hooks.

Not sure which would be best - you'll need to read the documentation and see which fits your needs.

Maybe after ngAfterViewChecked.

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

export class Link1 implements ngAfterViewChecked {
    ngAfterViewChecked() {
        buildTree(){
    $('#FicheName_detailContent').height($('#NAMEsearch').height());
    if ($('#tvFicheName') != null) {
        $("#t_Search").val('');
        var isFull = $("ck_FullOrPartiell").checked;
        BuildTreeViewNAME($('#tvFicheName'), '', isFull, null);
     }
   }
}

(That being said - there's a good chance you can build the view without jquery just using angular.)

excuse formatting- tricky on an ipad

来源：https://stackoverflow.com/questions/43586760/angular2-dont-load-external-js-file-when-i-change-the-view

标签

javascript

angular

angular2-routing