Question

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

Ex：{ path: 'my/route', component: HeroListComponent, data: { title: 'Heroes List' } }返回有关匹配路线的信息，例如：

my @ary = @{ $months->{$key} };

基本上，我尝试做的是判断当前网址/路径的路线是否与导航到的路线相匹配。

Answer 1

如果您想获取当前URL并根据组件代码在组件代码中做出一些决定，例如添加样式以在导航菜单中为当前项着色，那么您可以从路由器获取当前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，例如，如果您传递了一个＆＃39; id＆＃39;变量通过这样的URL：

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);
          });
      })
}

Angular 2 - 将URL匹配到Route

1 个答案: