Question

基于此问题

我正在尝试创建一些指令来处理基于URL的html中的 active 类我也订阅了urlchanged中的url，我不知道这是否是一个好的解决方案。这是我的指令

import { Directive, Input, Renderer2, ElementRef } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
    selector: '[gxpActiveLink]'
})
export class ActiveLinkDirective {
    @Input() activeUrl: string;

    constructor(private router: Router, renderer: Renderer2, hostElement: ElementRef) {
        router.events.subscribe(() => {
            let aObj = document.getElementById('sub-page-navigation').getElementsByTagName('li');
            for (let i = 0; i < aObj.length; i++) {
                if (this.activeUrl === this.router.url.substring(0, this.router.url.indexOf('?'))) {
                    renderer.addClass(hostElement.nativeElement, 'active');
                } else {
                    renderer.removeClass(hostElement.nativeElement, 'active');
                }
            }
        });
    }
}

这是我的html

<ul class="nav nav-tabs tabs-navigation" id="sub-page-navigation">
  <li class="nav-item" gxpActiveLink activeUrl="/tabs/contracts"><a routerLink="contracts" [queryParams]="{ activeOnly: false }"  class="nav-link">Contracts</a></li>
  <li class="nav-item" gxpActiveLink activeUrl="/tabs/addresses"><a routerLink="addresses" [queryParams]="{ pageLimit: 100 }" class="nav-link">Addresses</a></li>
</ul>

我遇到的问题是这可以正常工作，但是当有人像 /选项卡/合同 它没有在元素上添加活动类吗？

角活动链接指令

0 个答案: