Question

我正在努力在与可选参数匹配的链接上设置活动标记。

以下是我的路线：

{ path: 'clients', component: ClientListComponent, canActivate: [AuthenticationGuard] },
{ path: 'clients/:id', component: ClientDetailComponent, canActivate: [AuthenticationGuard] },

第一个是完整列表，第二个是所选id的详细信息。（所以我不想尝试在网址中使用必需的参数）

我在ClientListComponent上有2个链接代表＆＃34;仅限活动＆＃34; （默认）和＆＃34;全部＆＃34;过滤器。

<a [routerLink]="['/clients']" ...
<a [routerLink]="['/clients', {showAll: 'true'}]" ...

导致网址：

/clients
/clients;showAll=true

有关如何为活动类连接这些内容的任何建议？标准routerLinkActive ignores optional parameters。

Answer 1

您可以订阅路线更改，然后使用标记在[ngClass]旁边标记路线：

import { Component, OnInit } from '@angular/core';
import { Router, Event, NavigationStart } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  clientFlag = true;
  showAllFlag = true;

  constructor(
    private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe( (e) => {
      if (e instanceof NavigationStart) {
        if (e.url === '/clients') {
            this.clientFlag = true;
            this.showAllFlag = false;
        } else {
            this.clientFlag = false;
            this.showAllFlag = true;
        }
      }
    })
  }

}

并在你的html模板中：

<a [routerLink]="['/clients']" [ngClass]="{'custom-class': clientFlag}" ...
<a [routerLink]="['/clients', {showAll: 'true'}]" [ngClass]="{'custom-class-2': showAllFlag}" ...

有很多方法可以进行这种“路线检查”。更优雅（标志的单个对象，更高级别的路由名称检查等），但这应该给出如何快速有效地实现自定义路由检查的一般形式（对于替换[routerLinkActive]指令的情况）。

Angular2 +需要routerLinkActive类型的解决方案，用于可选参数

1 个答案: