Angular 5. Comment suivre le changement de route dans un fichier Javascript, ou l'exécution d'une fonction au niveau du composant ?

Question

J'ai un fichier global.js script et j'ai besoin de lancer la fonction InitSwiper() lorsque la route passe à '/home', mais je ne trouve pas comment suivre le routeur dans le fichier script ou lancer la fonction à travers home.component.ts.

import { Component, OnInit } from '@angular/core';

declare var global: any; 

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  ngOnInit() {
    global.initSwiper();
  }

}

global.js

$(function () {

    "use strict";
    $(window).load(function(){
        pageCalculations();
        $('#loader-wrapper').fadeOut();
        $('body').addClass('loaded');
        initSwiper();
    });
...
})

Answer 1

Si vous utilisez CLI, vous devez inclure ce fichier dans .angular-cli.json dans le tableau "scripts".

si vous voulez appeler une fonction de ce fichier dans home.component.ts seulement, alors vous pouvez déclarer comme ci-dessous

declare var global:any; 

et ensuite sur

ngOnInit(){
    global.InitSwiper();
}

Certains ont suggéré des gardes, mais c'est exagéré si vous n'avez pas besoin de retarder ou d'empêcher le chargement de l'itinéraire.

Answer 2

Si vous importez le routeur dans votre constructeur, vous pouvez l'abonner comme suit :

import { Router, NavigationEnd } from '@angular/router';

constructor(private next: Router) {
  next.events.subscribe((route) => {
    if (route instanceof NavigationEnd) {
      console.log(route.url);
    }
  });
}

Dans l'exemple ci-dessus, il devrait imprimer l'itinéraire actuel.

Answer 3

Vous pouvez créer un service et faire en sorte que votre routeur l'appelle dans le canActivate une fois qu'il a atteint la route requise, comme ceci. Cela vous permettra de gérer n'importe quoi avant que le composant ne soit chargé.

router.module.ts

...
import {myService} from '../services/myService.service'
export const routes: Routes = [
  {path: '/home', component: HomeComponent, canActivate:[myService]}
]
...

monService.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable()
export class myService implements canActivate{

canActivate{
  //execute initSwiper here
  if(/*success?*/){
    return true;
   }
   else{
   //redirect?
}

constructor(
  private _router: Router) { }