Angular 2 - 将 URL 与路由匹配

是否可以获取 URL 或路径并找出它在代码隐藏中匹配的路由？

Ex: Router.matchRoute('my/route')返回有关匹配路由的信息，例如：

{
  path: 'my/route',
  component: HeroListComponent,
  data: { title: 'Heroes List' }
}

基本上，我想做的是判断当前 URL/路径的路由是否与导航到的 URL/路径匹配。

如果您想获取当前 URL 并根据它的内容在组件代码中做出一些决定，例如添加样式来为导航菜单中的当前项目着色，那么您可以从 Router 获取当前 URL 并进行比较到一个已知的值去做某事。

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

 constructor(
    private router: Router
 ) {}

然后您可以编写函数来检查特定路线：

 isSomePage() {
    if (this.router.url.includes('/my-page-path/')) {
        return 'active';
    } else {
        return '';
    }
 }

然后将 thing 函数绑定到 ngClass 以将类（活动）添加到该项目并使用 css 对其进行样式设置。

 <div [ngClass]="isSomePage()">
    "colour me when the URL matches the isSomePage function"
 </div>

然后通过css设置样式

div.active {
    color: white;
    background-color: red;
}

如果您停留在一个地方并希望监视 URL 的更改，则可以订阅 router.events，例如，如果您通过 URL 传递“id”变量，如下所示：

http://localhost:4000/#/home/my-component/?id=1146605

您可以订阅 id 值的更改 - 在本示例中，我将这些值记录到控制台，但是一旦您在此处获得该值，您就可以对该值执行任何您喜欢的操作。

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

var routerPassedParam

  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(event => {
        console.log("event", event);
        this.route
          .queryParams
          .subscribe(params => {
            // Defaults to 0 if no query param provided.
            var routerPassedParam = +params['id'] || 0;
            console.log('Query param routerPassedParam: ', routerPassedParam);
          });
      })
}