当我想要根据路线改变背景时，我面临着这个问题。但它只在我浏览网站时工作，而不是当我刷新页面时。

在router.events.subscribe()中，这是事件。导航时的Url，刷新时的this。router。Url。

现在它起作用了:

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

constructor(private router: Router) {}

public ngOnInit() {
    this.router.events.subscribe((events:any) => {
        let theme = '';
        if (events instanceof NavigationStart) { theme = events.url; }
        else { theme = this.router.url; }
        
        if(theme === '/videos') { ... }
}

使用这个

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

constructor(private router: Router) {
    router.events.filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
            console.log(event);
        });
}

主要是。ts进口

import 'rxjs/add/operator/filter';

EDIT

现代的方式

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter(event => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });

我面临的问题是，当用户在应用程序中导航或访问URL(或在特定URL上刷新)时，我需要URL路径来显示基于URL的子组件。

更重要的是，我想要一个可以在模板中使用的Observable，所以路由器。Url不是一个选项。和路由器。事件订阅，因为在组件模板初始化之前触发路由。

this.currentRouteURL$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url)
);

希望能有所帮助，祝你好运!

可以在.ts文件中使用

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

constructor(private router: Router) {}

this.router.events.subscribe(value => {
      if (value instanceof NavigationStart) {
        console.log(value) // your current route
      }
    });

简单的方法

import { Router } from '@angular/router';
constructor(router: Router) { 
      router.events.subscribe((url:any) => console.log(url));
      console.log(router.url);  <---------- to get only path eg:"/signUp"
}

在Angular 14中，如果你这样做

this.router.url

它总是会返回'/'

您可以使用Location服务(https://angular.io/api/common/Location)及其方法“path”来获得URL，而不是使用Router(在导航生命周期中可能还没有最终路由)。这是一个比“window.location”更好的选择。pathname，”它不会感知Angular，并且会在路径中包含基本的href。

import { Location } from '@angular/common';

constructor(private location: Location) { }

ngOnInit(): void {
    console.log(this.location.path());  // returns path

}