简单的答案 角8。*

constructor(private route:ActivatedRoute) {
  console.log(route);
}

为那些使用Angular9+的人更新了答案，通过使用@angular/ Router提供的路由器API并监听路由变化

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

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      
      name = 'Get Current Url Route Demo';
      currentRoute: string;
     routeSubscription: subscription;
    
      constructor(private router: Router){
        console.log(router.url);
        
        this.routeSubscription = router.events.filter(event => event instanceof NavigationEnd)
              .subscribe(event => 
               {
                  this.currentRoute = event.url;          
                  console.log(event);
               });
        }
    }

this.router.events.subscribe((event) => {
  if (event instanceof NavigationStart) {
    this.showProgressBar = true
  } else if (event instanceof NavigationEnd) {
    this.showProgressBar = false
  }
  else if (event instanceof NavigationCancel) {
    this.showProgressBar = false
  }
})

您可以在任何事件路由状态下订阅

在组件中，你可能想尝试这样做:

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

constructor(private router: Router) {
router.events.subscribe(
        (event) => {
            if (event instanceof NavigationStart)
                // start loading pages
            if (event instanceof NavigationEnd) {
                // end of loading paegs
            }
        });
}

RxJS 6

router.events.pipe(filter(event => event instanceof NavigationStart))

感谢Peilonrayz(见下面的评论)

new router >= RC.3

import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';

constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

你也可以通过给定的事件进行过滤:

import 'rxjs/add/operator/filter';

constructor(router:Router) {
  router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      // You only receive NavigationStart events
    });
}

使用成对操作符来获取先前和当前事件也是一个不错的想法。https://github.com/angular/angular/issues/11268#issuecomment-244601977

进口的rxjs /添加/运营商/成对的; import {Router} from '@angular/ Router '; 导出类AppComponent { 构造函数(私有路由器:router) { This.router.events.pairwise ().subscribe((event) => { console.log(事件); })； }; ｝

角4。X及以上:

这可以通过使用ActivatedRoute类的url属性来实现，如下所示:

this.activatedRoute.url.subscribe(url =>{
     console.log(url);
});

注意: 你需要从angular/router包中导入和注入提供商

import { ActivatedRoute } from '@angular/router`

and

constructor(private activatedRoute : ActivatedRoute){  }