Angular 2 - 将 URL 匹配到路由

Question

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

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

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

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

Answer 1

如果你想获取当前 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 函数绑定(bind)到 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);
          });
      })
}