Third party library not being loaded when route changes

Question

i have a problem about js file is not work after i do routing navigate.

1.this's my script file

$(document).on('page:change', function () {
    $('#wsnavtoggle').click(function () {
        $('.wsmenucontainer').toggleClass('wsoffcanvasopener');
        $('.wsmenucontainer').removeClass('wsoffcanvasopener02');
    });
    ....
});

2.I include my js file and jquery library on index.html file

  <!-- JQUERY -->
  <script src="assets/js/jquery-3.2.1.min.js"></script>
   ....
  <!-- MENU REPONSIVE -->
  <link rel="stylesheet" type="text/css" media="all" href="assets/style/webslidemenu.css">
  <script type="text/javascript" src="assets/js/webslidemenu.js"></script>

3.at login-page.component.ts , I use routing navigate in login method

login(e) {
 ...
  this.router.navigate(['/main']);
 }

4.this is my routing

{   
        path: 'member',
        component: MemberPageComponent,
        children: [
            {path: '', redirectTo: 'login', pathMatch: 'full'},
            {path: 'login', component: LoginPageComponent}
        ]
    },

    {
        path: 'main', 
        component: MainPageComponent,
        children: [
            {path: '', redirectTo: 'trade', pathMatch: 'full'},
            {path: 'trade',  component: TradePageComponent}
        ]
    }

5.When myapp login successful and navigate to main page, I try to test my script by using slide menu bar, it doesn't work. if I refresh this page, it does work.

I need to make it work after navigate. help me please