My js file does not work after I do the routing

Question

My JavaScript file does not work on angular 4 after moving the route.

• this is my script file:

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

• I include the js file in the index.html file:

  <script type="text/javascript" src="assets/js/webslidemenu.js"></script>
  

• on login-page.component.ts, I use routing in the login method:

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

• 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
            },
            ....
        ]
    }
  

• When myapp login is successful and go to the main page, I try to check my script using the slide menu bar, this will not work. if i refresh this page it will work.

I need to make it work after navigation.