Angular2 Router V3 和菜单选择

Question

我希望我的菜单通过在基于当前路线的 menuItem（如 Ng1 中）应用 'active' class 来显示当前路线。

@Component({
  moduleId: module.id,
  selector: 'main-menu',
  directives: [
    ROUTER_DIRECTIVES,
  ],
  template: '
<paper-button #menu1 [data]="['/app/collection']" [routerLink]="['/app/collection']" [ngClass]="{active: isActive(menu1.data)}">My Collection</paper-button>
<paper-button #menu2 [data]="['/app/book/find']" [routerLink]="['/app/book/find']" [ngClass]="{active: isActive(menu2.data)}">Browse Books</paper-button>'
})
export class MainMenuComponent {

  public current:string;

  constructor(public router:Router, private changeDetector:ChangeDetectorRef) {
    this.router.events.subscribe((e)=> {
      this.current = e.url;
    });
  }

  ngOnInit() {
    this.changeDetector.detectChanges();
  }

  isActive(data) {
    if (data) {
      return this.current == data[0];
    }
  }
}

这是有效的，但有 2 个问题我需要一些帮助来解决：

1) 我需要调用 this.changeDetector.detectChanges(); 否则活动 class 不会应用于页面的初始加载。（我不明白为什么这不是开箱即用的...)

2) 关于模板，我还没有找到不在 routerLink 中重复我自己的方法。我希望能够将引用传递给我的数据，例如 menu2.data 但它不起作用...

任何help/advice将不胜感激谢谢

Answer 1

在新路由器中，您可以定义当路由处于活动状态时应将什么 class 添加到 routerLink：

<a [routerLink]="['/app/collection']" [routerLinkActive]="['active']">Home</a>

Angular2 Router V3 和菜单选择

Angular2 Router V3 and Menu selection

angular

router

angular2-changedetection