Angular 2确切的RouterLinkActive包括片段？

Question

当使用CSS routerLink并将routerLinkActiveCSS应用于导航栏时,我还想包含这些fragment信息,以便链接对于主页中的部分是唯一的.

我已经尝试过[routerLinkActiveOptions]="{ exact: true }"运气了.

导航条形码的相关部分是:

  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="inicio">Inicio</a>
  </li>
  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="invierte">Invierte</a>
  </li>
  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="contacto">Contacto</a>
  </li>

上述代码访问的三个不同的URL是:

• /sitio#inicio
• /sitio#invierte
• /sitio#contacto

但是当点击其中任何一个时,所有这些都被标记为活动(因为它们对应于routerLink="/sitio"并且fragment=*信息不包括在检查中.这导致导航栏在单击其中任何一个时看起来像这样:

关于如何做到这一点的任何想法？

Answer 1

我只是想如果有人遇到同样的问题我会解决它的问题:跟踪网站中的当前部分并通过组件中的函数使用类绑定而不是使用routerLinkActive.

模板中的链接变为:

<li [class.active]="isSectionActive('inicio')">
    <a routerLink="/sitio" fragment="inicio">Inicio</a>
</li>
<li [class.active]="isSectionActive('invierte')">
    <a routerLink="/sitio" fragment="invierte">Invierte</a>
</li>
<li [class.active]="isSectionActive('contacto')">
    <a routerLink="/sitio" fragment="contacto">Contacto</a>
</li>

注意缺少使用routerLinkActive,而使用类绑定[class.active]=isSectionActive('<name-of-section>')代替.

跟踪我们所在部分并决定是否在模板中应用CSS类的代码是:

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

// Class signature... {

    private activeSiteSection: string;

    constructor(
        private router: Router,
        private sessionService: SessionService
    ) {
        router.events.subscribe((event) => {
            if(event instanceof NavigationEnd ) {
                this.SiteURLActiveCheck(event);
            }
        });
    }

    private SiteURLActiveCheck(event: NavigationEnd): void {
        if (event.url.indexOf('#inicio') !== -1) {
            this.activeSiteSection = 'inicio';
        } else if (event.url.indexOf('#invierte') !== -1) {
            this.activeSiteSection = 'invierte';
        } else if (event.url.indexOf('#contacto') !== -1) {
            this.activeSiteSection = 'contacto';
        } else {
            this.activeSiteSection = '';
        }
    }

    private isSectionActive(section: string): boolean {
        return section === this.activeSiteSection;
    }
}

可能是矫枉过正,但我​​宁愿走这条路线而不是修改Angular 2的来源.:)

Answer 2

AngularrouterLinkActiveOptions提供了片段、查询参数、矩阵参数和路径匹配，以便在没有自定义解决方案的情况下匹配活动路径。

如果你看一下RouteLinkActive你会发现它是一个联合：

routerLinkActiveOptions: { exact: boolean } | IsActiveMatchOptions;

其中IsActiveMatchOptions扩展了配置，通过匹配片段、queryParams、matrixParams 和路径的任意组合来确定路由器链路是否处于活动状态：

export interface IsActiveMatchOptions {
  matrixParams: 'exact'|'subset'|'ignored';
  queryParams: 'exact'|'subset'|'ignored';
  paths: 'exact'|'subset';
  fragment: 'exact'|'ignored';
}

您将它们传递给routeLinkActiveOptions而不是{ exact: true }：

<a [routerLinkActive]="linkActive"
   [routerLink]="linkCommands"
   [routerLinkActiveOptions]="linkActiveOptions"
   [fragment]="fragment">...</a>

创建了一个快速stackblitz来演示使用片段的用法： https://stackblitz.com/edit/angular-ivy-1vekqs ?file=src/app/app.component.html

Answer 3

有一个开放的问题来支持https://github.com/angular/angular/issues/13205

routerLinkActive是一个简单的指令。您也许可以使用该扩展功能自行创建克隆。