Question

我正在尝试使用angularStart事件角度跟踪网址更改。我正在编写一个功能模块，这个网址跟踪需要在服务而不是组件中完成。我甚至都没有组件。在这个url跟踪处理程序中，我还想找出url的哈希片段。我试过下面的代码，但navigationStart永远不会被解雇。如果我必须将它映射到angularjs，那么我们就是这样做的。

angularjs代码

  $rootScope.$on('$locationChangeStart', locationChangeHandler);

  var locationChangeHandler = function (event, newUrl, oldUrl) {
}

角度代码

export class MyGuard implements CanActivate {

  constructor(  private router: Router , private activatedRoute: ActivatedRoute) {

    this.activatedRoute.fragment.subscribe((fragment: string) => {
      console.log("My hash fragment is here => ", fragment)
    })

    this.router.events
      .filter(e => e instanceof   NavigationStart)
      .pairwise()
      .subscribe((e) => {
        console.log("inside navigation start");
        console.log(e) })



    this.router.events.subscribe(event => {

   // This didn't work
   //if(event instanceof NavigationStart) {
     //   console.log("navigation started");
     // }

      else if(event instanceof NavigationEnd) {
        console.log("navigation ended");
      }


      else if(event instanceof NavigationCancel) {
        console.log("navigation cancelled");
      }

      else if(event instanceof NavigationError) {
        console.log("navigation errored");
      }


      else if(event instanceof RoutesRecognized) {
        console.log("navigation routes recognized");
      }

    })


  }

Answer 1

您正在构建一个canActivate防护，只有在导航开始后才能运行。这就是为什么你没有看到导航开始。

您可以在此处查看路由事件的顺序：https://angular.io/api/router/Event

请注意，GuardsCheckStart是执行canActivate后卫的时间，导航开始后是。

我通常会将此类代码放在我的应用组件中：

import { Component } from '@angular/core'; import { Router, Event, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router'; @Component({ selector: 'mh-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { loading: boolean = true; constructor(private router: Router) { router.events.subscribe((routerEvent: Event) => { this.checkRouterEvent(routerEvent); }); } checkRouterEvent(routerEvent: Event): void { if (routerEvent instanceof NavigationStart) { this.loading = true; } if (routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationError) { this.loading = false; } } }

Answer 2

由于我在这里朝着另一个方向前进，我将其作为一个新答案。

以下是我的CanActivate警卫的样子（见下文）。请注意，它具有canActivate方法，该方法提供路由信息和路由状态信息。您应该能够使用该方法来提取所需的URL的任何部分。

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, Router,
         CanActivate } from '@angular/router';

import { AuthService } from './auth.service';

@Injectable()
export  class AuthGuard implements CanActivate {

    constructor(private authService: AuthService,
                private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return this.checkLoggedIn(state.url);
    }

    checkLoggedIn(url: string): boolean {
        if (this.authService.isLoggedIn()) {
            return true;
        }

        // Retain the attempted URL for redirection
        this.authService.redirectUrl = url;
        this.router.navigate(['/login']);
        return false;
    }
}

NavigationStart没有被调用角度

2 个答案: