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

import { Directive, Input, OnChanges, SimpleChanges, HostBinding } from '@angular/core';
import { RouterLinkActive } from '@angular/router';

@Directive({
  selector: '[optionalRouterLinkActive]',
})
export class OptionalRouterLinkActiveDirective extends RouterLinkActive implements OnChanges {
  @Input() optionalRouterLinkActive: string;

  @HostBinding('class')
  get isActive(): string {
    return this.router.isActive(this.links, this.optionalRouterLinkActive) ? this.optionalRouterLinkActive : '';
  }

  ngOnChanges(changes: SimpleChanges): void {
    if ('optionalRouterLinkActive' in changes) {
      this.links = this.routerLink;
      this.classes = this.optionalRouterLinkActive;
    }
    super.ngOnChanges(changes);
  }
}

<a routerLink="/home" optionalRouterLinkActive="active">Home</a>
<a routerLink="/about" optionalRouterLinkActive="active">About</a>