typescript – 通过编写添加新类的自定义指令来更改“router-link-active”类的默认名称

我想在我的Angular2应用程序中使用Semantic UI.问题是我找不到更改默认名称“router-link-active”类的路由器设置.我需要它被称为“活动”才能使菜单正确显示.

据我了解,这种设置不存在.我在Vue.JS中看过它,所以我希望它也在那里.请求开发人员解决这个问题是个好主意吗？

所以.我们需要编写一个自定义指令,将“active”类添加到具有“router-link-active”类的所有DOM元素,但我也遇到了一些问题.

有一个similar question,但答案太复杂,不适合我.所以我读了一些文档,决定做更好的事情：

commons.ts：

@Directive({
    selector: '.router-link-active',host: {'[class.active]': 'trueConst'} //just 'true' Could also work I think...
})
export class ActiveRouterLinkClass {
    trueConst: boolean = true; //...if 'true' works we don't need this
}

然后我将ActiveRouterLinkClass导入到我的main.component.ts并将其添加到组件的指令列表中.不幸的是,现在我有这个错误：“EXCEPTION：组件’Main’视图上的意外指令值’undefined’”.请解释我做错了什么！

Angular不会将指令或组件应用于动态应用的选择器.如果将.router-link-active类添加到链接是动态的,因此不起作用.

您可以做的是使用更通用的选择器,如[routerLink],然后读取是否使用@input()设置.router-link-active并使用主机绑定设置所需的类.

@Directive({
  selector: '[routerLink]')
export class RouterLinkReplaceClass {
  // add class `my-active` when `myActiveClass` is `true`
  @HostBinding('class.my-active') 

  // read `router-link-active` class state
  @Input('class.router-link-active') 

  myActiveClass: bool = false;
}

Plunker example

另见In Angular 2 how do I assign a custom class to an active router link?

更新

因为添加/删除router-link-active类时未更新myActiveClass我修改了指令以获取与RouterLink指令相同的有效路由信息：

import {ROUTER_DIRECTIVES,RouteConfig,Router,Instruction} from 'angular2/router';

@Directive({
  selector: '[routerLink]'
})
export class RouterLinkReplaceClass {

  //@Input('class.router-link-active')
  // myActiveClass: boolean = false;
  private _navigationInstruction: Instruction;
  @Input('routerLink')
  private _routeParams: any[];

  constructor(private _router: Router) {
    // we need to update the link whenever a route changes to account for aux routes
    this._router.subscribe((_) => this._updateLink());
  }

  private _updateLink(): void {
    this._navigationInstruction = this._router.generate(this._routeParams);
  }

  @HostBinding('class.my-active')
  get isRouteActive(): boolean {
    return this._navigationInstruction ? this._router.isRouteActive(this._navigationInstruction) : null;
  }
}