각도 5. Javascript 파일에서 경로 변경을 추적하거나 구성 요소 수준에서 함수를 실행하는 방법은 무엇입니까?

Question

global.js 스크립트 파일이있어서 경로가 '/ home'으로 변경되면 InitSwiper() 기능을 시작해야하지만 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

로드되기 전에 이것은 당신이 무엇이든을 처리 할 것입니다, 당신은 것을 포함해야 "scripts"배열 내의 파일 .angular-cli.json에있는 파일. 당신이 home.component.ts에서 해당 파일에서 함수를 호출 할 경우

만, 당신은 어떤 제안했다

ngOnInit(){ 
    global.InitSwiper(); 
} 

경비에 다음

declare var global:any; 

하고 다음과 같이 선언 할 수 있지만, 과잉 경우입니다 경로가 지연되거나 지연되는 것을 막을 필요가 없습니다.

Answer 2

실제로 그렇게처럼 구독 할 수 있습니다 :

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

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

을 예에서 그 위에는 현재 경로가 출력되어야합니다.

Answer 3

서비스를 생성하고 라우터가 canActivate에서 필요한 경로로 이동하면 서비스를 호출하도록 할 수 있습니다. 당신은 CLI를 사용하는 경우 구성 요소가

router.module.ts

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

myService.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) { }