Angular 5.如何跟踪Javascript文件中的路由变化，或者在组件级别执行功能？

Question

我有 global.js 脚本文件，需要在路由更改为“/home”时启动 InitSwiper() 函数，但无法在脚本文件中找到如何跟踪路由器或通过 [=19 启动函数=]

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

如果您在构造函数中导入路由器，您实际上可以像这样订阅它：

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

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

在上面的示例中，它应该打印出当前路线。

Answer 2

您可以创建一个服务，并让您的路由器在它到达所需路由后在 canActivate 中调用它，就像这样。这将让您在组件加载之前处理任何事情

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

Answer 3

如果您使用的是 CLI，则需要将该文件包含在 "scripts" 数组内的 .angular-cli.json 文件中。

如果您只想从 home.component.ts 中的那个文件调用一个函数，那么您可以如下声明

declare var global:any;

然后

ngOnInit(){
    global.InitSwiper();
}

有些人建议使用守卫，但如果您不需要延迟或阻止路由加载，那就太过分了。

Angular 5.如何跟踪Javascript文件中的路由变化，或者在组件级别执行功能？

Angular 5. How to track route change in Javascript file, or execute function in component level?

javascript

angular

typescript

angular4-router